Vue中的動態路由匹配路由問題

Posted on by

vue-router 動態路由匹配

我們經常需要把某種模式匹配到的所有路由，全都映射到同個組件。

例如，我們有一個 User 組件，對於所有 ID 各不相同的用戶，都要使用這個組件來渲染。

那麼，我們可以在 vue-router 的路由路徑中使用“動態路徑參數”(dynamic segment) 來達到這個效果：

簡而言之，動態路由匹配解決的是頁面根據id跳轉的問題

// appfront/src/router
const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 動態路徑參數 以冒號開頭
    { path: '/user/:id', component: User }
  ]
})

現在呢，像 /user/foo 和 /user/bar 都將映射到相同的路由。

一個“路徑參數”使用冒號 : 標記。當匹配到一個路由時，參數值會被設置到 this.$route.params，可以在每個組件內使用。

於是，我們可以更新 User 的模板，輸出當前用戶的 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

你可以在一個路由中設置多段“路徑參數”，對應的值都會設置到 $route.params 中。

例如：

模式 匹配路徑 $route.params
/user/:username /user/evan { username: 'evan' }
/user/:username/post/:post_id /user/evan/post/123 { username: 'evan', post_id: '123' }

除瞭 $route.params 外，$route 對象還提供瞭其它有用的信息，例如，$route.query (如果 URL 中有查詢參數)、$route.hash 等等。

你可以查看 API 文檔 的詳細說明

下面這個是在實際應用中使用動態路由進行跳轉對應頁(這裡采用的是按鈕跳轉，還可以route-link跳轉此處略過)

// components/yyy.vue

...
<el-button
            size="mini"
            @click="handleEdit(scope.row.Id)">編輯</el-button>
            ...
<script>            
  export default {
      methods: {
handleEdit(Id) {
    # 跳轉到xxx+id頁面
        this.$router.push({path:'/xxx/'+Id})
      },
      
</script>

// router/index.js
...
import Router from 'vue-router'
import xxx from '@/components/xxx'
...

export default new Router({
  routes: [
    ...
    {
      path:'/xxx/:Id',
      name:'xxx',
      component: xxx
    },
    ...
  ]
})

跳轉後對參數進行獲取

// components/xxx.vue
...
<div>{{ this.$route.params.id }}</div>
...

參考：

Vue Route官方文檔

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：