一、路由跳转
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可为正整数或负整数