vue路由、传参、接收方式、跳转、router、path、name、router-link、to、replace、push、query、params

1、router-link（声明式） 1.1、不带参数

html

name，path都行，建议用name。 注意：router-link中链接如果是斜杠/开始，那么就是从根路由开始，如果开始不带斜杠/，则从当前路由开始。

<router-link :to="{ path: '/home' }"> path: '/home' }); this.$router.push({ name: 'home' }); 

2.1.2、query传参

this.$router.push({ path: '/home', query: { id: '1' } }); this.$router.push({ name: 'home', query: { id: '1' } }); 

html获取参数

this.$route.query.id

script获取参数

this.$route.query.id

2.1.3、params传参

路由配置path: "/home/:id"或者path: "/home:id"，不配置path，第一次可请求,刷新页面id会消失；配置path，刷新页面id会保留。只能用name。 query和params区别 query类似get请求，跳转之后页面url后面会拼接参数，类似?id=1，非重要性的可以这样传，刷新页面id会保留。 params类似post请求，跳转之后页面url后面不会拼接参数，但是刷新页面id会消失。

this.$router.push({ name: 'home', params: { id: '1' } }); 

2.2、this.$router.replace()

用法与push相同。

2.3、this.$router.go(n)

this.$router.go(n); 

2.4、三者的区别

this.$router.push 跳转到指定url路径，并向history栈中添加一个记录，点击后退会返回到上一个页面。 this.$router.replace 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面，就是直接替换了当前页面。 this.$router.go(n) 向前或者向后跳转n个页面，n可为正整数或负整数。

3、配置路由 3.1、路径传参（参数就是路径的一部分，可变的路径）

html

<div @click="skips(1)">查看详情 skips(id) { // 直接调用$router.push实现携带参数的跳转 this.$router.push({ path: `/details/${id}` }); // this.$router.push( // `/monitor/service-record?serviceName=${this.query.serviceName}` // ); } } 

路由配置

{ path: '/details/:id', component: details } 

接收

this.$route.params.id

3.2、name和params

通过路由属性中的name来确定匹配的路由，通过params来传递参数。页面刷新，数据会丢失。

html

<div @click="skips(2)">查看详情 skips(id) { this.$router.push({ name: 'details', params: { id } }); } } 

路由配置

{ name: 'details', component: details } 

接收

this.$route.params.id

3.3、path和query

使用path来匹配路由，然后通过query来传递参数，query传递的参数会显示在url后面?id=××。页面刷新，数据会丢失。

html

<div @click="skips(3)">查看详情 skips(id) { this.$router.push({ path: '/details', query: { id } }) } } 

路由配置

{ path: '/details', name: 'details', component: details } 

接收

this.$route.query.id

注意：在组件中获取参数的时候使用route.params而不是router这很重要。

4、相关链接

1、PHP-vue路由跳转方式有哪些 2、CSDN-vue页面跳转的三种方式