您现在的位置是:网站首页> 编程资料编程资料
vue如何通过router-link或者button跳转到一个新的页面_vue.js_
                     2023-05-24
                334人已围观
                
                2023-05-24
                334人已围观
            
简介 vue如何通过router-link或者button跳转到一个新的页面_vue.js_
通过router-link或者button跳转到一个新的页面
a、商品列表页面如下(点击'跳转到购物车页面'就会跳到一个新的页面,而不是在同一个页面加载一个组件)
这是商品列表页面显示商品标题 显示商品图片 // 跳转到购物车页面跳转到购物车页面 
b、通过
import Vue from 'vue' import Router from 'vue-router' import GoodsList from '@/views/GoodsList' import Title from '@/views/Title' import Image from '@/views/Image' // 2、导入Cart组件 import Cart from '@/views/Cart'   Vue.use(Router)   export default new Router({   mode: 'history',   routes: [     {           path: '/goods',           name: 'GoodsList',           component: GoodsList,           children: [               {                     path: 'title',                   name: 'title',                   component:Title                   },                 {                     path: 'image',                   name: 'image',                   component:Image                   }           ]     },     // 1、写入购物车组件     {         path: '/cart',           component: Cart,     }   ] })vue跳转到一个新的页面的多种方法
通过router-link或者button或者a链接的方法
1、router-link路由
查看当前排名 
其中/a/b为router路由的路径
2、button按钮
查看当前排名 querySort(){ this.$router.push({ path: "/a/b" }); }
3、a链接
导出游戏区服 data() { return{ exportDistrict: "/a/b",}}
选用哪种方式自己决定;
另:如果在方法中跳转一个页面,比如错误页,使用方法如下:
if (res.code === 1002) {         //无权限统一处理         loadPage("/error");         return;       }        // 跳转、重定向 const loadPage = (url, reject) => {   if (reject) {     return reject(url);   }   window.$$vm.$router.push(url); };main.js中:
window.$$vm = new Vue({   el: '#app',   router,   store,   render: h => h(App) })以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
相关内容
- vue3中setup语法糖下通用的分页插件实例详解_vue.js_
- vue如何实现路由跳转到外部链接界面_vue.js_
- input输入框限制只能输入数字的方法实例(个人认为最好的)_javascript技巧_
- vue background-image 不显示问题的解决_vue.js_
- input输入框限制只能输入数字的方法实例(个人认为最好的)_javascript技巧_
- JavaScript利用canvas实现鼠标跟随特效_javascript技巧_
- vue3如何使用watch监听props中的数据_vue.js_
- vue background-image 不显示问题的解决_vue.js_
- vue踩坑之backgroundImage路径问题及解决_vue.js_
- JavaScript利用canvas实现鼠标跟随特效_javascript技巧_
 
                                
                                                         
                                
                                                         
                                
                                                         
 
    