您现在的位置是:网站首页> 编程资料编程资料

vue如何通过router-link或者button跳转到一个新的页面_vue.js_

2023-05-24 370人已围观

简介 vue如何通过router-link或者button跳转到一个新的页面_vue.js_

通过router-link或者button跳转到一个新的页面

a、商品列表页面如下(点击'跳转到购物车页面'就会跳到一个新的页面,而不是在同一个页面加载一个组件)

   

b、通过方法还需要修改路由文件src/router/index.js,其他方法不用看了 

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) })

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

-六神源码网