Vue中路由跳转传参方式详解
一、路由跳转
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可为正整数或负整数
下一篇：