一、路由跳转
Vue 中路由跳转主要分为两种方式：
-
声明式路由导航（
<router-link>） -
编程式路由导航（js的方式）
二、声明式路由导航
<router-link>
1.不带参数跳转
<router-link :to="{name: 'home' }" > </router-link>
<router-link :to="{path: '/home'}" > </router-link>
// name, path都行, 建议用name
<router-link :to="{name: 'home'}" tag='li'> </router-link>
注意：
<router-link>中链接如果是/开始就是从根路由开始，如果开始不带/，则从当前路由开始。<router-link>会默认解析成a标签，可以通过tag属性指定它解析成其他标签
2.带参数跳转
params方式传参
<router-link :to="{name: 'home', params: {id:1}}">
// params 传参数 (类似post)
// 路由配置path: "/home/:id" 或者 path: "/home:id"
// 不配置path: 第一次可请求, 刷新页面id会消失
// 配置path: 刷新页面id会保留
// html取参: $route.params.id
// script取参: this.$route.params.id
query方式传参：
<router-link :to="{name: 'home', query: {id:1}}">
// query传参数 (类似get, url后面会显示参数)
// 路由可不配置
// html取参: $route.query.id
// script取参: this.$route.query.id
三、编程式路由导航
1. this.$router.push()
点击路由链接，跳转到新的页面，可以返回到当前路由界面
1.不带参数跳转
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2.带参数跳转
query 方式传参：
this.$router.push({name:'home', query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html取参: $route.query.id
// script取参: this.$route.query.id
params方式传参：
this.$router.push({name:'home',params: {id:'1'}})
// 只能用 name
// 路由配置path: "/home/:id" 或者 path: "/home:id",
// 不配置path, 第一次可请求, 刷新页面id会消失
// 配置path, 刷新页面id会保留
// html取参, $route.params.id
// script取参, this.$route.params.id
query 和 params 区别
query 类似 get，跳转之后页面 url 后面会拼接参数，类似 ?id=1，非重要性的可以这样传，密码之类还是用 params 刷新页面 id 还在；
params 类似 post，跳转之后页面 url 后面不会拼接参数，但是刷新页面 id 会消失。
2. this.$router.replace()
用新路由替换当前路由，不可以返回到当前路由界面
具体使用方式同上 this.$router.push()
3. this.$router.back()
请求(返回)上一个记录路由
4. this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数
// 请求(返回)上一个记录路由
this.$router.go(-1)
// 请求下一个记录路由
this.$router.go(1)
以上四种方式区别
this.$router.push：跳转到指定 url 路径，并向 history 栈中添加一个记录，点击后退会返回到上一个页面 ==>> 队列的方式（先进先出）
this.$router.replace：
跳转到指定 url 路径，但是 history 栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面) ==>> 栈的方式（先进后出）
this.$router.back：
请求(返回)上一个记录路由
this.$router.go：
向前或者向后跳转n个页面，n可为正整数或负整数