路由的基本用法(已拍摄了两个简单的屏幕截图,建议阅读文档以了解)
动态路径匹配
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。
比如个人中心,每个用户的个人中心都有各自的路径,这时候可以使用“动态路径参数”
参数值会被设置到this.$route.params中,$route的详细属性后面补充,最好还是看文档
响应路由参数的变化,动态路由从例如 /user/foo 导航到 /user/bar ,原来组件实例会被复用,因为两个路由渲染的是同一个组件,复用效率更高,但也意味着组件的生命周期钩子不会被再调用,因此,要想对路由参数的变化作出响应,使用watch监测$route即可,或者导航守卫
捕获所有路由或 404 Not found 路由
用一个 * 通常用于客户端404错误,当使用到通配符时,$route.params 内会自动添加一个 pathMatch 参数,它包含了URL通过通配符被匹配的部分
高级匹配模式
留给以后
匹配优先级
当要考虑优先级时,路由定义的越早,优先级就越高
嵌套路由
以 / 开头的嵌套路径会被当作根路径
编程式导航
用 <router-link> 创建a标签来定义导航链接之外,还可以借助 router 的实例方法
在 Vue 实例内部,可以通过 $router 访问路由实例,因此我们可以调用 this.$router.push
使用 router.push 会向 history 栈添加一个新的记录,因此用户点击浏览器后退按钮,可以回到之前的URL
点击 <router-link> 时,这个router.push 方法会在内部调用,因此二者本质相同
如果参数的对象里面提供了 path ,则 params 会被忽略,即:需要自己在 path 里提供完整的 URL,该规则同样适用于 router-link 组件的 to 属性
使用 router.replace 不会向 history 添加新纪录,而是替换掉当前的 history 记录
使用 router.go 可以在history 记录中前进或后退多少部,类似于 windows.history.go(n)
命名路由
通过一个名称来标识一个路由有时候更方便,尤其是在 链接一个路由、或执行一些跳转时
在创建 router 实例时要在配置中给路由配置名称
直接用 name 即可链接到一个命名路由
命名视图
当想要在同级展示多个视图时,可以给每个视图命名,没有命名的 router-view,默认为 default
重定向和别名
重定向也是在在配置里添加的
重定向:用户访问 /a ,URL被替换成 /b,然后匹配路由为 b
别名:用户访问 /b,URL保持为 /b,但路由匹配为 /a,就像用户访问 /a 一样
路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的URL上使用
使用 props 将组件和路由解耦
props 若被设置为 true,则route.params 将会被设置为组件属性
props 若是一个对象,它会被按原样设置为组件属性,当 props 是静态的时候有用