vue如何通过router-link或者button跳转到一个新的页面
作者:chainbees
这篇文章主要介绍了vue如何通过router-link或者button跳转到一个新的页面,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
通过router-link或者button跳转到一个新的页面
a、商品列表页面如下(点击'跳转到购物车页面'就会跳到一个新的页面,而不是在同一个页面加载一个组件)
<template> <div> 这是商品列表页面 <router-link to='/goods/title'>显示商品标题</router-link> <router-link to='/goods/image'>显示商品图片</router-link> // 跳转到购物车页面 <router-link to='/cart'>跳转到购物车页面</router-link> <button @click="jump">Button-跳转到购物车页面</button> <div> <router-view></router-view> </div> </div> </template>
<script> export default { data(){ return{ msg: '' } }, methods: { jump(){ //this.$router.push("/cart") //传递的参数用{{ $route.query.goodsId }}获取 this.$router.push({path: '/cart?goodsId=12'}) //this.$router.go(-2) //后退两步 } } } </script> <style> </style>
b、通过<router-link>方法还需要修改路由文件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路由
<router-link :to="{ path: '/a/b' }" // tag="button" //作为一个按钮,样式得自己再写一下,不方便,请选用第二种方式 >查看当前排名</router-link >
其中/a/b为router路由的路径
2、button按钮
<el-button type="primary" icon="el-icon-search" @click="querySort" >查看当前排名</el-button > querySort(){ this.$router.push({ path: "/a/b" }); }
3、a链接
<a :href="exportDistrict" rel="external nofollow" class="filter-item el-button el-button--success" >导出游戏区服</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) })
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。