1.动态路由匹配：
- 🍊参数：
<router-link :to="{name:'user',params:{id:1}}">用户1</router-link>中的params是指的参数，可以传多个参数，所以是对象。 - 🍊接收参数：然后在
User对象中可以通过{{$route.params.id}}在User组件的页面上使用
//App.vue文件
<template>
<div id="app">
<div id="nav">
<!-- 使⽤router-link组件来导航 -->
<!-- 通过传⼊to属性指定连接 -->
<!-- router-link默认会被渲染成⼀个a标签 -->
<!-- <router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link> -->
<router-link :to="{name:'home'}">首页</router-link>
<router-link :to="{name:'about'}">关于我</router-link>
<router-link :to="{name:'user',params:{id:1}}">用户1</router-link>
<router-link :to="{name:'user',params:{id:2}}">用户2</router-link>
<!-- 路由组件的出口 -->
<router-view></router-view>
</div>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
2.路由组件的复用：
🍊路由组件复用（重要）：
当使⽤路由参数时，例如从 /user/1 导航到 /user/2， 原来的组件实例会被复⽤。因为两个路由都渲染同个组件，⽐起销毁再创建，复⽤则显得更加⾼效。 不过，这也意味着组件的⽣命周期钩⼦不会再被调⽤
🌵小结：路由组件的复用处理
- 🍊使⽤
watch(监测变化) $route对象，路由发生变化了，去请求后端数据，然后进行渲染页面的等后续操作 - 🍊使用路由守卫
beforeRouteUpdate:参数有3--->从哪来的from、到哪去的to、放行的next函数
//🌵User.vue
<template>
<div>
<h1>我是用户路由组件{{$route.params.id}}</h1>
</div>
</template>
<script>
export default {
created() {
console.log('我是路由信$route', this.$route);
},
watch: {
// 🍊使⽤watch(监测变化) $route对象
// $route(to, from) {
// console.log('我是from', from.params.id);
// console.log('我是to', to.params.id);
// 🍊这里可以送ajax请求你，请求后端数据了，然后渲染页面
// },
},
//🍊路由守卫
beforeRouteUpdate(from, to, next) {
console.log('beformRouterUpdate的from', from);
console.log('beformRouterUpdate的 to', to);
//这里一定要调用next(),不然会阻塞路由的
next();
},
};
</script>
<style scoped>
</style>
