Vue 路由
动态路由
动态路由是什么
路由都是严格定义分配好的，只有 router-link 中的 to 属性和 JavaScript 中定义的路由的 path 一样，在会显示对应的 component、但实际开发中，这种方式明显不足。
例如：不同的用户登录，只有 “用户名 ID ” 不同，其他部分一样，相当于用了一个组件.，这时在配置路由的时候，需要把用户 id 作为参数传入，这就需要利用动态路由来实现。可以用动态路径参数（dynamic segment）给路径的动态部分匹配不同的 id。
{ path: '/user/:id', component: user }
动态路由在来回切换时，由于用的都是一个组件，Vue 不会销毁再重建该组件，而是复用该组件。Vue 把对应的组件选然后，来回切换动态路由，这个组件将不会发生变化，组件的生命周期不能用了，如果想要在来回切换时进行一些操作，就需要在组件内部利用 watch 来监听 $route 的变化。
watch: {
#route (to, from) {
// to 去哪一个组件
// from 从哪一个组件过来
console.log(to), // 控制台输出 to 对象
console.log(from) // 控制台输出 from 对象
}
}
query 方式传值
query 方式传递参数，使用 path 属性给定对应的跳转路径（类似于 GET 请求），在页面跳转的时候，可以在地址栏看到请求参数。(在引入 js 文件时，vue 的引入一定是在 vue-router 前面)
<body>
<div id="app">
<router-link to="/user?id=10&name=admin">登录</router-link>
<router-view></router-view>
</div>
</body>
<script>
// 定义 user 组件
var user = {
template: '<h3>id: {{this.$route.query.id}} ' +
'name: {{$route.query.name}}</h3>',
created() { // 组件的生命周期钩子函数
console.log(this.$route) // 用 this.$route 来接收参数
}
}
var router = new VueRouter({
routes: [
{path: '/user', component: user}
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
params 方式传值
参数会以查询字符串的形式显示在浏览器地址中。params 方式不需要通过查询字符串传参，通常会搭配路由的 history 模式，将参数放在路径的中或隐藏
<div id="app">
<router-link to="/user/10/admin">登录</router-link>
<router-view></router-view>
</div>
</body>
<script>
// 定义 user 组件
var user = {
template: '<h3>id: {{$route.params.id}} name: {{$route.params.name}}</h3>',
created() { // 组件的生命周期钩子函数
console.log(this.$route) // 用 this.$route 来接收参数
}
}
var router = new VueRouter({
routes: [
// 对于 URL 进行解析
{path: '/user/:id/:name', component: user}
]
})
var vm = new Vue({
el: '#app',
router
})
</script>