Vue Router路由導航及傳參方式

路由導航及傳參方式

一、兩種導航方式

①：聲明式導航

<router-link :to="...">

②：編程式導航

router.push(...)

二、編程式導航參數有兩種類型

①：字符串

// 字符串
router.push('home')

②：對象

// 對象
router.push({ path: 'home' })

三、編程式導航的params傳參和query傳參

①：params傳參(有地址欄中顯示參數和不顯示參數兩種)

//瀏覽器地址欄中顯示參數和不顯示參數兩種情況主要就是看路由配置

//顯示參數的配置
{
   name: "user",
   path: "/user:userId",
   component: Detail
}
// 命名的路由
// params相當與發送了一次post請求，請求參數會顯示在瀏覽器地址欄中，並且刷新頁面之后參數不會消失
router.push({ name: 'user', params: { userId: '123' }})

//不顯示參數的配置
{
   name: "user",
   path: "/user",
   component: Detail
}
// 命名的路由
// params相當與發送了一次post請求，請求參數不會顯示在瀏覽器地址欄中，並且刷新頁面之后參數會消失
router.push({ name: 'user', params: { userId: '123' }})

//統一接收參數方式
this.$route.params.userId

②：query傳參

// 帶查詢參數，變成 /register?plan=private
// query相當與發送了一次get請求，請求參數會顯示在瀏覽器地址欄中
router.push({ path: 'register', query: { plan: 'private' }})

//接收參數方式
this.$route.query.plan

③：特別注意

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

四、聲明式導航的params傳參和query傳參

規則與編程式導航相同，只是寫法不同，簡單介紹

//params傳參
<router-link :to="{ name: 'user', params: { userId: '123' }}">click to news page</router-link>
//接收參數方式
this.$route.params.userId

//query傳參
<router-link :to="{ path: 'register', query: { plan: 'private' }}">click to news page</router-link>
//接收參數方式
this.$route.query.plan