vue 动态路由匹配

$route.query

简单例子:
定义组件

<template>
  <h3>User ID :{{$route.query.id}}</h3>
</template>

<script>
export default {
  name: "Users"
}
</script>

<style scoped>

</style>

配置信息

{
    path: '/user',//链接地址
    name: 'User',//别名
    component: Users//加载的组件
  },

在链接传递参数时即可动态更新id值

$route.params

简单例子
在配置路径信息使用冒号表明是参数

{
    path: '/user/:id',//链接地址
    name: 'User',//别名
    component: Users//加载的组件
  },

组件通过params获取

<template>
  <h3>User ID :{{$route.params.id}}</h3>
</template>

<script>
export default {
  name: "Users"
}
</script>

<style scoped>

</style>

效果