vue路由用法

父組件中：通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數。

 this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
        })

對應路由配置: 這裏可以添加:/id 也可以不添加，不添加數據會在url後面顯示，不添加數據就不會顯示 

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

 子組件中: 這樣來獲取參數

this.$route.params.id

 

父組件：使用path來匹配路由，然後通過query來傳遞參數
這種情況下 query傳遞的參數會顯示在url後面?id=？

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

 對應路由配置：

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

對應子組件: 這樣來獲取參數 

this.$route.query.id

 

<router-link :to="{path:'/one/log',query:{num:123}}">顯示登錄頁面</router-link>

子路由組件通過 this.$route.query.num 來顯示傳遞過來的參數

<h3>{{this.$route.query.num}}</h3>

 

<router-link :to="{name:'Log',params:{num:666}}">顯示登錄頁面</router-link>

子路由獲取的參數：{{this.$route.params.num}}