开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情
路由跳转用法
- 用
<router-link :to="{..}">语句
<router-link :to="{name:'home'}" />
<router-link :to="{path:'/home'}" />
// name与path都可以，建议使用name
// router-link中链接如果是'/'开始就是从跟路由开始，如果开始不带'/'，从当前路由开始
<router-link :to="{name:'home', params:{name:'张三'}}" />
// params传参(类似于post)
// 路由配置 path:"/home/:name" 或者 path:"/home:name"
// 不配置path 第一次可以请求 刷新页面则消失
// 配置path 刷新页面则name保留
// 取值template内 $route.params.name
// 取值script内 this.$route.params.name
<router-link :to="{name:'home', query:{name:'张三'}}" />
// query传参(类似get, url后面会显示参数信息)
// 路由可不配置
// 取值template内 $route.query.name
// 取值script内 this.$route.query.name
- 用
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: {name:'张三'}})
this.$router.push({path: '/home', query: {name:'张三'}})
// 取值template内 $route.query.name
// 取值script内 this.$route.query.name
// 3.携带参数的情况(params)
this.$router.push({name: 'home', params: {name:'张三'}})
// 路由配置 path:"/home/:name" 或者 path:"/home:name"
// 不配置path 第一次可以请求 刷新页面则消失
// 配置path 刷新页面则name保留
// 取值template内 $route.params.name
// 取值script内 this.$route.params.name
// 3.params与query的区别
query类似 get, 跳转之后的页面 url后面会拼接参数 类似于?name='111' 非重要信息可以这样传递 密码之类还是用params刷新页面name还存在
params类似 post, 跳转url不会去拼接参数，但刷新页面name会消失
- 用
this.$router.replace()语句
//导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。
this.$router.replace({path:'/home'});
//带参数方式与push相同（获取参数也一样）
this.$router.replace({path:'/home', query: {name: "3"}});
//push方法也可以传replace
//push在加上replace: true后，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
this.$router.push({path: '/home', replace: true})
- 用
this.$router.go(n)语句。
this.$router.go(n)
// 向前或者向后跳转n个页面，n可为正整数或负整数
this.$router.go(-1)
// 跳转到上一页
this.$router.go(-2)
// 跳转到上上页
区别
- this.$router.push
跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
- this.$router.replace
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
- this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数
