vue 路由传值

vue 的路由传值方式两种，一种是 query 传参，一种是 params 传参。query 传参会在 url 上显示参数，params 则不会。

query 传参

1. 定义路由

{
    path:'/post'
}

2. 跳转

<router-link to='/post?id=123'></router-link>
// 或者
router.push({
    path:'/post',
    query:{
        id:123
    }
})

3. 获取参数

let id = $route.query.id

params 传参

1. url 携带参数

// 定义路由
{
    path:'/post/:id',
    name:'post'
}

// 跳转
// 1) router-link
<router-link :to="`/post/${id}`"></router-link>

// 2) push
router.push({
    name:post,
    params:{
        id:id
    }
})
// 或
router.push({
    path:`/post/${id}`
})

// 获取参数
let id = $route.params.id

2. url 不携带参数

// 定义路由
{
    path:'/post',
    name:'post'
}

// 跳转
// 1) router-link
<router-link :to="{name:'post',params:{id:123}}"></router-link>
// 2) push
router.push({
    name:post,
    params:{
        id:123
    }
})

// 获取参数
let id = route.params.id

注意: params url 不带参数必须使用 name