vue3.0 CLI - 3.2 路由的初级使用教程

我的 github 地址 -- 阶段学习成果都会建立分支。

==========================

动态路由

在路由某部分里加入[ : ]，就成为动态路由如：/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 中

3、About.vue 中 data 或者 computed 属性中添加 isActive: function () { return this.$route.params.id === "666"; }

4、App.vue 中

5、About.vue 中