前端 vueRouter

原布局 App.vue HelloWord.vue Sidebar.vue 期望布局 命名视图布局 降低布局耦合 router.js App.vue HelloWord.vue Sidebar.vue

VueRouter - V4 Hash 模式 HTML5 模式 VueRouter - V3 Hash 模式 HTML5 模式

Sensitive 与 strict 路由配置 默认情况下，所有路由是不区分大小写的，并且能匹配带有或不带有尾部斜线的路由

重定向

路由参数 匹配模式 匹配路径 $route.params /users/:username /users/eduardo { username: 'eduardo' } /users/:usernam

router/index.ts (1) 普通路由 (2) 命名路由 (3) 嵌套路由 main.js 使用 编程式导航

路由组件传参 router.query 参数 转换成 组件 props 参数 router.params 参数 转换成 组件 props 参数

路由元信息 访问路由会带过去的默认信息 存在meta 字段中 组件使用 路由使用

全局前置守卫