Vue-Router笔记

path和name 的区别： 

通过router.push 都能跳转到对应的路由，区别就是path跳到的就是直接对应的路由位置，但是name只是一个名字，跳转到的是name对应的path

name和path同时存在？

如果router-link跳转的位置数据中既包含name又包含path，则优先按照path进行跳转；

<router-link :to="{  params: { name: 1}, path: '/bar/aaa',query: {name: 123} }">foo1</router-link>

 

1

<router-link :to="{  params: { name: 1}, path: '/bar/aaa',query: {name: 123} }">foo1</router-link>

路由传参？

1. query传参

        使用path + query的方式传参，直接跳转到对应的路由

<router-link :to="{ path: '/foo?name=123' }">foo1</router-link>
<router-link to="/foo?name=123">foo1</router-link>

2

 

1

<router-link :to="{ path: '/foo?name=123' }">foo1</router-link>

2

<router-link to="/foo?name=123">foo1</router-link>

        或者使用path+query的形式，如果path后有query的同时也给了query参数，那么使用query数据

<!-- 显示的是456 -->
<router-link :to="{ path: '/foo?name=123',query: {name: 456} }">foo1</router-link> 

2

 

1

<!-- 显示的是456 -->

2

<router-link :to="{ path: '/foo?name=123',query: {name: 456} }">foo1</router-link> 

    2. params传参

        注意：如果提供了 path，params 会被忽略   

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

5

 

1

const userId = '123'

2

router.push({ name: 'user', params: { userId }}) // -> /user/123

3

router.push({ path: `/user/${userId}` }) // -> /user/123

4

// 这里的 params 不生效

5

router.push({ path: '/user', params: { userId }}) // -> /user