动态路由参数,以冒号开头配置,浏览器中的路径不需要加冒号,类似于正则表达式对一个简单字符串的匹配
匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。
路径加上 / 为根路径
this.router 访问路由路由器
this.route 访问当前路由
用 name 跳转和用路径跳转效果相同
命名视图就是使用命名组件,命名路由用于 push 或 link 的 to 属性
重定向函数: redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
导航卫士无法应用到被重定向的路由
路由别名的意思是,当用户访问别名时 url 不变,但路由匹配规则是原名
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
使用 props 将组件和路由解耦:具体方法是设置路由的 props 为 true。如果该路径有多个命名组件则将 props 的值设为一个对象,为每个命名的组件设置 props 功能。 props 还可以设置为函数或对象
『导航』表示路由正在发生变化,导航守卫分为全局导航守卫、路由独享守卫、组件内导航守卫
组件导航守卫的 beforeRouterEnter 是支持给 next() 传递回调的唯一守卫
我们称呼 routes 配置中的每个路由对象为 路由记录
一个路由匹配到的所有路由记录会暴露为 $route 对象(还有在导航守卫中的路由对象)的 $route.matched 数组。因此,我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。
数据有两种获取方式分别是:导航之前获取与导航之后获取,导航之后获取需要应用组件钩子,导航之前获取需要应用导航守卫
可以在数据获取之前将 loading 组件设置为true ,在数据获取的回调函数中将 loading 组件设置为false ,这样可以造成页面加载数据时形成加载的效果
vue-router 只在支持 history-pushState 的浏览器中可用
可以结合 vue 的异步组件与Webpack 的代码分隔功能,轻松实现路由组件的懒加载
懒加载是指将不同路由对应的组件分割成不同的代码块,然后路由被访问时才加载对应的组件。
babel 需要添加插件才能解析懒加载
网友评论