// 路由配置
{
  path: '/user/:userId',
  component: User
}

// 生成鏈接
this.$router.push('/user/' + 我.id)
// 或者
this.$router.push({
  name: 'user',
  params: { userId: 我.id }
})

// 配置
{
  path: '/article/:category/:id',
  component: Article
}

// 生成方式
this.$router.push({
  path: `/article/${category}/${articleId}`
})

{
  path: '/user/:userId(\d+)',  // 只匹配數(shù)字ID
  component: User
}

{
  path: '/search/:keyword?',  // 問(wèn)號(hào)表示可選
  component: Search
}

// 兩種都能匹配
this.$router.push('/search/vue')
this.$router.push('/search')

{
  path: '/docs/*',  // 匹配/docs下的所有路徑
  component: Docs
}

// 菜單配置
const menuItems = [
  { path: '/dashboard', name: '控制臺(tái)' },
  { path: '/user/:id', name: '用戶中心' }
]

// 動(dòng)態(tài)渲染
<router-link 
  v-for="item in menuItems"
  :to="item.path.replace(':id', currentUserId)"
>
  {{ item.name }}
</router-link>

computed: {
  breadcrumbs() {
    const matched = this.$route.matched
    return matched.map(route => {
      return {
        path: this.resolvePath(route),
        title: route.meta.title
      }
    })
  }
},
methods: {
  resolvePath(route) {
    return route.path
      .replace(':userId', this.$store.state.userId)
      .replace(':projectId', this.currentProject)
  }
}

// 在組件中
console.log(this.$route)
/*
{
  path: "/user/123",
  params: { userId: "123" },
  query: {},
  hash: "",
  fullPath: "/user/123",
  matched: [...]
}
*/

// 測(cè)試路徑是否匹配
const match = router.resolve('/user/123')
console.log(match)

/**
 * @name 用戶詳情頁(yè)
 * @path /user/:userId
 * @param {number} userId - 用戶ID必須為數(shù)字
 */
{
  path: '/user/:userId(\d+)',
  name: 'user',
  component: User
}

// 使用query替代
this.$router.push({
  path: '/user',
  query: { userId: 我.id }  // 變成/user?userId=123
})

// 監(jiān)聽(tīng)路由變化
watch: {
  '$route.params.userId'(newId) {
    this.loadUser(newId)
  }
}