vue-router 学习笔记

作者: 老邵 | 来源:发表于2018-04-20 21:46 被阅读114次

动态路由参数,以冒号开头配置,浏览器中的路径不需要加冒号,类似于正则表达式对一个简单字符串的匹配

匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。

路径加上 / 为根路径

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 需要添加插件才能解析懒加载

相关文章

网友评论

    本文标题:vue-router 学习笔记

    本文链接:https://www.haomeiwen.com/subject/cnazkftx.html