前面的安装及基础以后再更新。。。
一、动态路由及懒加载
1.在路由路径中使用 “动态路径参数”
⑴params
配置：动态路径参数id，以冒号开头
在<router-link>中 我们加入一个 params 属性来传入具体的参数值
读取路由中的参数
⑵query
在path中，不需要配置参数
在<router-link>中 我们加入一个 query属性来传入具体的参数值
path写法
读取路由中的参数
注意：如果提供了 path，params 会被忽略， query 不属于这种情况。
https://blog.csdn.net/mf_717714/article/details/81945218（params和query的区别）
2.动态添加路由（router.addRoutes）
router.addRoutes( routes )
动态添加更多的路由规则：参数必须是一个符合 routes 选项要求的数组。(如图)
符合 routes 选项要求的数组
3.路由懒加载
当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。
路由懒加载语法
在路由配置中什么都不需要改变，只需要像往常一样使用 Foo
二、重定向
重定向也是通过 routes 配置来完成
上面例子是从 ‘/a’ 重定向到 ‘/b’
重定向的目标也可以是一个命名的路由
也可以是一个方法，动态返回重定向目标
注意：导航守卫并没有应用在跳转路由 ‘/a’ 上，而仅仅应用在其目标上(重定向的新路由)。为 ‘/a’ 路由添加一个 beforeEach 或 beforeLeave 守卫并不会有任何效果。
三、编程式导航
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
四、路由的滚动行为
当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：
scrollBehavior 方法接收 to 和 from 路由对象。
第三个参数 savedPosition 当且仅当 popstate导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
这个方法返回滚动位置的对象信息，长这样：
五、精确匹配与模糊匹配
#linkActiveClass（模糊匹配）
类型: string
默认值: "router-link-active"
全局配置 <router-link> 的默认“激活 class 类名”。参考 router-link。
#linkExactActiveClass（精确匹配）
类型: string
默认值: "router-link-exact-active"
全局配置 <router-link> 精确激活的默认的 class。可同时翻阅 router-link。
网友评论