一、腳手架安裝及創建vue項目（vue-cli 4）
1、安裝
npm install -g @vue/cli 安裝腳手架
2、先切換到存放代碼的目錄
vue 查看是否正常執行，PowerShell 無法執行查看：https://blog.csdn.net/qq_41956789/article/details/99998418
3、打開vue 後臺
vue ui
直接按提示創建一個項目即可，然後使用 HbuilderX 或其他工具打開項目
創建完成後可以自行查看相關依賴及配置等
4、demo項目啓動展示
啓動命令， HbuilderX 打開會自動啓動項目
npm run serve
二、腳手架項目目錄結構說明（vue-cli 4）
vue.js是一套構建用戶界面的漸進式框架。vue採用自底向上增量開發的設計。vue的核心庫只關心視圖層，非常容易學習，非常容易與其它庫和已有項目整合。vue完全有能力驅動採用單文件組件和vue生態系統支持的庫開發的複雜單頁應用。
vue.js的目標是通過儘可能簡單的API實現響應的數據綁定和組合的視圖組件。
1、總體框架
一個vue-cli的項目結構如下，其中src文件夾是需要掌握的，所以本文也重點講解其中的文件，至於其他相關文件，瞭解一下即可。
2、 index.html——[主頁]
index.html如其他html一樣，但一般只定義一個空的根節點，在main.js裏面定義的實例將掛載在根節點下，內容都通過vue組件來填充
3、App.vue——[根組件]
一個vue頁面通常由三部分組成:模板(template)、js(script)、樣式(style)
【template】
其中模板只能包含一個父節點，也就是說頂層的div只能有一個（例如上圖，父節點爲#app的div，其沒有兄弟節點）
是子路由視圖，後面的路由頁面都顯示在此處
打一個比喻吧,類似於一個插槽，跳轉某個路由時，該路由下的頁面就插在這個插槽中渲染顯示
【script】
vue通常用es6來寫，用export default導出，其下面可以包含數據data，生命週期(mounted等)，方法(methods)等，具體語法請看vue.js文檔，在後面我也會通過例子來說明。
【style】
樣式通過style標籤
如要引入外部css文件，首先需給項目安裝css-loader依賴包，打開cmd，進入項目目錄，輸入npm install css-loader,回車。安裝完成後，就可以在style標籤下import所需的css文件，例如：
import ‘./assets/css/public.css’
這樣，我們就可以把style下的樣式封裝起來，寫到css文件夾，再引入到頁面使用，整個vue頁面也看上去更簡潔。
4、main.js——[入口文件]
main.js主要是引入vue框架，根組件及路由設置，並且定義vue實例，下圖中的
components:{App}就是引入的根組件App.vue
後期還可以引入插件，當然首先得安裝插件。
vue 4前
這裏定義了路徑爲’/'的路由，該路由對應的頁面是Hello組件，所以當我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Hello組件
類似的，我們可以設置多個路由，‘/index’,’/list’之類的，當然首先得引入該組件，再爲該組件設置路由。
三、路由 vue-router
1、安裝vue-router依賴
2、配置路由（main.js）
// 引入vue框架
import Vue from 'vue'
// 引入根組件
import App from './App.vue'
// 關閉生產模式下給出的提示
Vue.config.productionTip = false
// 1· 引入路由組件
import VueRouter from 'vue-router'
// 2· vue-router安裝插件,
// 3· 註冊全局組件,給組件this 掛載屬性
Vue.use(VueRouter);
// 6·引入路由頁面(默認頁)
import Index from './components/HelloWorld' //可以省略.vue,.js 等後綴名
// 4· 創建/配置路由
let router = new VueRouter({
routes: [{
path: '/index',
component: Index
}]
})
//定義實例
new Vue({
// 5·交給構造的 options
router,
render: h => h(App),
}).$mount('#app')
3、主組件展示路由頁（App.vue）
<router-view></router-view>
4、訪問效果
測試連接：http://localhost:8080/#/index
四、路由 router-link （等同與a連接）
1、App.vue 添加 router-link
to值=路由key
<template>
<div>
<router-link to="/movie">電影</router-link><br />
<router-link to="/music">音樂</router-link><br />
<router-link to="/index">hello world</router-link><br />
下方是路由內容
<hr />
<router-view></router-view>
</div>
</template>
<script>
</script>
<style >
</style>
2、添加router 路由配置
// 6·引入路由頁面(默認頁)
import Index from './components/HelloWorld' //可以省略.vue,.js 等後綴名
import Movie from './components/Movie'
import Music from './components/Music'
// 4· 創建/配置路由
let router = new VueRouter({
routes: [{
path: '/index',
component: Index
}, {
path: '/movie',
component: Movie
}, {
path: '/music',
component: Music
}, ]
})
3、添加路由頁
4、效果
五、路由-動態傳參
1、方式一（直接 url 傳參）
1、router-link url傳遞參數
<router-link to="/movie?id=666">電影</router-link><br /> <!-- 動態傳值1 -->
2、跳轉後的vue頁面，接收參數 $route.query.id
<div>
我是電影 id= {{$route.query.id }}
</div>
3、效果
2、方式二（路由 /：匹配）
1、路由配置添加 /:屬性名稱
如: /:id
2、url 傳遞參數方式
<router-link to="/music/111">音樂</router-link><br /> <!-- 動態傳值2 -->
3、接收參數$route.params.id
<div>
我是音樂 id = {{ $route.params.id }}
</div>
4、效果
六、配置404 頁面
一般情況
path= / 爲主頁
path= * 爲找不到url（404頁）
1、路由參數配置
{
path: '*',
component: NotFound
}
2、vue頁面
七、路由嵌套路由
官網嵌套路由文檔:https://router.vuejs.org/zh/guide/essentials/nested-routes.html
1、嵌套路由說明
如下圖：上方路由的示例爲一級路由，可控制左菜單的頁面展示
如：電影 --> [ 電視劇，電影，動漫，綜藝]
如：音樂 --> [ 安靜，傷感，喜慶，dj]
嵌套路由
2、嵌套路由使用
配置嵌套路由，在一級路由跳轉到的的頁面中添加 <router-view> 即可使用嵌套路由
{ path: '/user/:id', component: User, //一級路由添加 children 配置嵌套路由
children: [
{
// 當 /user/:id/profile 匹配成功， UserProfile 會被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 當 /user/:id/posts 匹配成功，UserPosts 會被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
八、路由權限控制實現思路
所有全局前置守衛，攔截所有路由
參考官網導航守衛：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB
1、全局前置守衛
/**
* to: Route: 即將要進入的目標 路由對象, from: Route: 當前導航正要離開的路由
*/
router.beforeEach((to, from, next) => {
window.console.log(to);
next(); //url放行
//next(false); //路由將不執行(url被攔截)
// next("/login"); //url 被攔截並跳轉到指定頁( 登錄頁/開通vip頁等)
// 這裏一般做權限控制,後臺獲取權限數據,判斷存在的權限數據中是否存在當前url,
// 不存在攔截url,並跳轉到指定頁面
})
2、效果
效果，所有的路由都被監聽並可以攔截和重定向
