Vue_Router全解析

说明:

Vue_Router作为Vue的一个插件而存在，适合用于构建单页面应用；主要作用是将路由路径和组件进行映射起来，最终呈现到页面上。传统的页面是通过a链接的跳转进行页面切换和跳转的。在SPA应用中，则是路径的切换（组件的切换）。因为单页面应用只有一个index.html,路径切换匹配到的组件都会被渲染在router-view这个路由视图（占位）。

一、Vue_Router的基本使用

二、路由的拆分

三、路由跳转（声明式导航或者编程式导航）

router-link跳转

《router-link》还有其他属性,这里以Bootstrap中导航为例,讲解router-link常见属性；
如下图所示实现下面的效果：


注释:active-class常用来做路由切换高亮效果；这里tag指定为li，为了避免出现a标签包裹a标签的奇怪行为。

编程式导航

四、$router和$route区别

这里我们通过vue-devtools进行查看

五、路由传参（****）

1、通过在映射表中配置name属性：指定当前路由名称(“命名路由”)

2、通过params传参（:to)：一定不能缺少冒号

3、通过query（查询参数）传参
目的:为了更多样的在路由跳转传递数据，有时候我们路由跳转URL传递例如?a =12&b = 3这样的查询数据。

此时url会出现这样的形式 http://localhost:8080/user/3/edit?locate=en&q=100,也是和params传参的区别。

说明:上面代码只是演示‘声明式导航’，编程式导航如push，replace同样可以在跳转时传递参数

另外值得注意的是：push(以此为例)：内部可以传入字符串路径，对象（path),如果需要传递参数：则必须传入对象；path和params不能同时存在，此时可以为跳转的路由添加name(使其成为命名路由)，否则参数传递不过去。

六、命名路由（name）

七、动态路由

有时候需要在同种模式下的路由映射到相同的组件，比如不同id的用户，映射到user组件,这就需要动态路径参数;

{ path: '/user/:id', component: User }  //比如这里的id就是动态路由参数.

重定向和捕捉404页面

path的星号匹配：匹配到所有的路径，一般放到最后，捕捉路由主要是为了解决用户在地址栏胡乱输入的路径，没有对应的组件与之对应的问题,所以一般会为之写一个NotFound.vue组件
响应路由参数

比如实现user1切换user2，看下图？（映射是同一个组件User组件）

User组件

八、嵌套路由（子路由Children）

举例
视图展现 ：可以看出APP router-view作为最外层路由，user组件中自己也使用router -view作为内层路由。所以就是嵌套路由.

user组件

映射表

注意：嵌套路由不要手贱加多余的/,路由会自动拼接。
userStart组件

userDetail组件

小技巧：这里：:to绑定的路径过长，可以为UserEdit添加name,这里跳转时vue-router也会为我们拼出完整的路径来（当然可传参（params或query）也可不传）

userEdit组件

九、命名视图

例如上面这种布局，可采用1个路径对应多个视图，视图同级显示，看代码：

十、路由懒加载(按需加载)

路由懒加载的写法有3种，这里介绍最简单的写法

推荐写法:

十一、路由守卫

通过vue-devtools进行路由追踪

当然通过切换调试模式，可以检测routes:不过：并不好用，必须手动刷新，才会正确显示

详细图解

下面我以一个详细的例子：讲解整个路由守卫钩子的执行顺序
看图下面的效果:


看代码

• 全局守卫：main.js
  
• 路由独享守卫

• 组件守卫
  home.js中也有这三个组件守卫钩子：下面进行测验
当从home，点击about

当从about切换到user
  
  最后梳理一下顺序：
  当点击切换路由时:
  组件守卫（离开）beforeRouteleave–>全局守卫router.beforeEach–>路由独享守卫beforeEnter–>组件进入守卫beforeRouterEnter–>全局中置守卫router.beforeResolve–>全局后置守卫router.afterEach–>生命周期钩子函数
  当组件复用时(动态路由)：触发beforeRouteUpdate钩子函数。
  小问题
  
  至此所有的路由守卫钩子函数就讲解完了。

十二、路由元信息(meta)

路由meta信息最终都会在$route这个对象上去，那么结合路由守卫的钩子函数，我们可以处理一些特殊的需求：比如动态修改页面的title,路由的权限控制等等。
下面以例子说明：
click 不同的导航，修改页面title

看代码


路由的权限控制
To Be continued…

十三、数据获取

…

十四、过渡动效

…

十五、滚动行为

…

十五、路由的一些API

…