1.什么是动态路由
基础的路由都是严格匹配的，只有router-link中的to属性和JavaScript中定义的路由中的path一样时，才会显示对应的component。
但在实际开发时，这种方式是明显不足的，例如，当用户去访问网站并登录成功之后，在页面中会显示”欢迎您+用户名”，不同的登录用户，只有”用户名不同，其他部分是一样的，这就相当于是一个组件，这里假设为是User用户组件。
此时，不同的用户(使用id来区分)都会导航到同一个User组件，这种情况下在配置路由的时候，需要把用户id作为参数传入，这就需要利用动态路由来实现。
在vue-router的路由路径中，可以使用动态路径参数(dynamic segment) 给路径的动态部分匹配不同的id
Vue
{
path:"/user/:id",
component:user
}2.query方式传参
理解了动态路由的概念后，通过query方式传递参数，使用path属性给定对应的跳转路径(类似于GET请求)，在页面跳转的时候，可以在地址栏看到请求参数。
Vue
<div id="app">
<router-link to="/user?id=10&name=admin">登录</router-link>
<router-view />
</div>
<template>
<h3>id:{{ this.$route.query.id }} name:{{ $route.query.name }}</h3>
</template>
<script>
export default {
created() {
console.log(this.$route)
},
}
</script>
import user from '@/components/user.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/user', component: user }
]
})3.params方式传参
使用query方式传参，参数会以查询字符串的形式显示在浏览器地址栏中。
使用params方式传参则不需要通过查询字符串传参，通常会搭配路由的history模式，将参数放在路径中或隐藏。
Vue
<div id="app">
<router-link to="/user/10/admin">登录</router-link>
<router-view />
</div>
<template>
<h3>id:{{ this.$route.params.id }} name:{{ $route.params.name }}</h3>
</template>
<script>
export default {
created() {
console.log(this.$route)
},
}
</script>
import user from '@/components/user.vue'
Vue.use(Router)
export default new Router({
mode: history,
routes: [
{ path: '/user/:id/:name', component: user }
]
})