1.路由基础配置
https://router.vuejs.org/zh/guide/
2.动态路由
- 根据设置的路径参数实现 const routes = [ // 动态字段以冒号开始 { path: '/users/:id', component: User }, ]。
- 需要注意的是参数改变时(第一次访问该路径后,第二次起),组件实例被重复使用,会导致vue的生命周期钩子不生效。可使用watch检测路径的参数:
const User = { template: '...', created() { this.$watch( () => this.$route.params, (toParams, previousParams) => { // 对路由变化做出响应... } ) }, }
通过配置beforeRouteUpdate导航守卫亦可。
3.捕获所有路由或 404 Not found 路由:
const routes = [ // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下 { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }, // 将匹配以 `/user-` 开头的所有内容,并将其放在 `$route.params.afterUser` 下 { path: '/user-:afterUser(.*)', component: UserGeneric }, ]
标签:vue,const,component,笔记,params,path,router,路由 From: https://www.cnblogs.com/qinqLoveCode/p/17355065.html