vue全家桶 ---vue-router路由篇

1、前提基础

• 本文在上一章-vue项目搭建的基础上，对vue-router路由配置进行进行详细的介绍。

2、路由配置

1. 按下图所示新建pages,layout文件夹，新建vue文件（这里NewDetails组件的path应该为'/new_details'）。

2. 如图所示配置路由文件。页面效果如下：

3、按需加载和路由鉴权

1. 安装vuex（cnpm i vuex -S）,修改router下的index.js文件如下图所示，采用按需加载：

2. 效果如下所示：

3. 点击按钮跳转到新闻详情页面，由于详情页需要登录权限，重定向到了登录页面，并保留了重定向之前的页面路由，登录之后可以直接跳转至新闻详情页。

4、总结

• 本文主要介绍了如何规划项目结构
• vue-router的基本配置与按需引用
• 利用vue-router全局钩子做登录鉴权。