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全局鉤子作登陸鑑權。