vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html
尽量把纷繁的知识,肢解重组成为可以堆砌的知识。
学会工具并不难,思考如何运用这些工具,才是编程或者工作中最难的部分。
我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。
==========================
动态路由在路由某部分里加入[ : ],就成为动态路由如:/user/:id/,那么路由导航,并不是 /user/id/ 而是 /user/666/。
显然这个 id 能被获取,在组件中使用。通过 this.$route.params 获取。 this 是当前组件,$route 是路由对象,params 是一个对象字面量 { id:666 }。
$route 通过 Vue.use(Router) 和 new Vue({ router, store, render: h => h(App) }).$mount('#app') 全局依赖注入,在所有组件中都可以使用它。
1、router.js 中 path: '/about' 路由 改为 path: '/about/:id'。
2、About.vue 中 <top-nav title="军事" :class="{ active: isActive }"/> 添加红色部分。
3、About.vue 中 data 或者 computed 属性中添加 isActive: function () { return this.$route.params.id === "666"; }
4、App.vue 中 <router-link to="/about/666">VUE</router-link>
5、About.vue 中 <style lang="less"> .active { background: red; } </style>
保存点击【VUE】导航按钮,即可见到效果: