Vue 路由跳转传参

参考：(56条消息) router-link中传值的三种方式_router-link互相传值_塵心的博客-CSDN博客

(56条消息) Vue 之 路由跳转传参方式详解【最全实用总结】_八了个戒的博客-CSDN博客

路由跳转

Vue 中路由跳转主要分为两种方式：

1. 声明式路由导航【<router-link>】

2. 编程式路由导航【js的方式——$router.push(…）】

一、声明式路由导航router-link传值的三种方式

1、【router/index.js】里面的路由规则的路径-有无别名？

// 第一种 ：to + name
<router-link :to="{name: 'home' }" > </router-link>

// 第二种 ：to + path
<router-link :to="{path: '/home'}" > </router-link>

// 第三种 to + path
 <router-link to="/home"></router-link>

// name, path都行, 建议用name --------------------------
<router-link :to="{name: 'home'}" tag='li'> </router-link>

注意：

1. <router-link> 中链接如果是 / 开始就是从根路由开始，如果开始不带 /，则从当前路由开始。
2. <router-link> 会默认解析成 a 标签，可以通过 tag 属性指定它解析成其他标签

2、传参-有无冒号？

        查询参数传参query

//1、查询参数传参query（查询）
// (类似get, url后面会显示参数)
<router-link :to="{name: 'home', query: {id:1}}"> 
<router-link to="/hometown?id=1&key='value'"> 

// 路由可不配置

html取参: $route.query.id
script取参: this.$route.query.id

      动态路由传参params

// 2、动态路由传参（常用于传递单个参数）
//params:参数 (类似post 提交)

<router-link :to="{name: 'home', params: {id:1}}"> 
<router-link to="/hometown/1"> 


// [index.js]路由配置path: "/home/:id" 或者 path: "/home:id" 
// 配置path: 刷新页面id会保留(!)
// 不配置path: 第一次可请求, 刷新页面id会消失

html取参: $route.params.id
script取参: this.$route.params.id

二、编程式路由导航

1-$router.push(…）

点击路由链接，跳转到新的页面，可以返回到当前路由界面

​

 1、有无name？

this.$router.push('/home')
this.$router.push({name:'home'})       //有name
this.$router.push({path:'/home'})      //无name

2、有无冒号？

//1\ 查询参数传参 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


//2\ 动态路由传参 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)