纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用

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】导航按钮,即可见到效果:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpgfyw.html