vue路由傳參方式 nuxt

vue路由傳參常用的三種方式

1、通過params來傳遞參數（本人常用）傳遞參數

接收參數

<li v-for="article in articles" @click="getDescribe(article.id)">

2、通過path跳轉

      getDescribe(id) {
        // 直接調用$router.push 實現攜帶參數的跳轉
        this.$router.push({
          path: `/describe/${id}`,
        })

對應路由配置如下：

{
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

接收參數

$route.params.id

3、通過query傳參 參數會顯示在url後面？id=？

注意：頁面之間的跳轉使用query 不然的話刷新頁面後會找不到參數

 this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

對應的路由配置

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

接收參數

$route.query.id

注意：route與router的區別

$route爲當前router跳轉對象裏面可以獲取name、path、query、params等

$router爲VueRouter實例，想要導航到不同URL，則使用$router.push方法

返回上一個history也是使用$router.go方法