路由導航及傳參方式

一、兩種導航方式

①：宣告式導航

<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