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

一、前提基础

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

二、路由配置

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

   

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

   

三、按需加载和路由鉴权

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

   

2. 效果以下所示：

   

3. 点击按钮跳转到新闻详情页面，因为详情页须要登陆权限，重定向到了登陆页面，并保留了重定向以前的页面路由，登陆以后能够直接跳转至新闻详情页。

   

四、总结

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