Vue框架详解（适合Java学习者）
生活随笔
收集整理的這篇文章主要介紹了
Vue框架详解（适合Java学习者）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 一、前言
- 二、Vue概述
- 三、MVVM架構
- 1.什么是MVVM
- 2.MVVM的好處
- 3.MVVM圖解
- 四、第一個Vue程序
- 五、Vue七大屬性
- 六、常用指令
- 1.綁定屬性（v-bind）
- 2.判斷（v-if）
- 3.循環（v-for）
- 4.綁定事件（v-on）
- 七、數據雙向綁定
- 八、Vue組件
- 九、Vue生命周期
- 1.Vue生命周期理解
- 2.Vue生命周期圖解
- 九、Axios異步通信
- 十、Vue計算屬性
- 十一、插槽slot
- 十二、自定義事件內容分發
- 十三、vue-cli腳手架
- 1.什么是vue-cli
- 2.使用vue-cli的環境前提
- 3.創建一個vue-cli程序
- 十四、Webpack打包器
- 1.什么是webpack
- 2.安裝webpack
- 3.使用webpack
- 十五、vue-router路由
- 十六、vue + elementUI整合小案例
- 十七、路由嵌套
- 十八、參數傳遞
- 方式一：取值
- 方式二：使用props減少耦合
- 十九、重定向
- 二十、路由模式與處理404
- 1.路由模式
- 2.處理404
- 二十一、路由鉤子與異步請求
- 1.路由鉤子函數
- 2.在鉤子函數中使用異步通信
一、前言
該技術博客是關于狂神說Vue教程的詳細總結，希望能給大家帶來幫助！
二、Vue概述
Vue是一套用于構建用戶界面的漸進式框架，該框架可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅簡單而且便于與第三方庫(如: vue-router: 跳轉，vue-resource: 通信，vuex:管理)或項目整合
Vue是漸進式JavaScript框架，所謂漸進式就是逐步實現新特性的意思，如實現模塊化開發、路由、狀態管理等新特性。其特點是綜合了Angular（模塊化） 和 React（虛擬DOM） 的優點，并有自己的特色功能：計算屬性
三、MVVM架構
1.什么是MVVM
MVVM（Model-View-ViewModel） 源自于經典的MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel層，負責轉換Model中的數據對象來讓數據變得更容易管理和使用，其作用如下:
- 該層向上與視圖層進行雙向數據綁定
- 向下與Model層通過接口請求進行數據交互
ViewModel能夠觀察到數據變化，并對視圖對應的內容進行更新
ViewModel能夠監聽到視圖變化，并能夠通知數據發生變化
2.MVVM的好處
MVVM模式和MVC模式一樣，主要目的是分離視圖(View)和模型(Model),有幾大好處：
- 低耦合：視圖(View)可以獨立于Model變化和修改,一個ViewModel可以綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
- 可復用：你可以把一些視圖邏輯放在一個ViewModel里面，讓很多View重用這段視圖邏輯。
- 獨立開發：開發人員可以專注于業務邏輯和數據的開發(ViewModel),設計人員可以專注于頁面設計。
- 可測試：界面素來是比較難于測試的，而現在測試可以針對ViewModel來寫。
3.MVVM圖解
- Model : 模型層，在這里表示JavaScript對象
- View : 視圖層,在這里表示DOM (HTML操作的元素)
- ViewModel : 連接視圖和數據的中間件，Vue.js就是MVVM中的ViewModel層的實現者在MVVM架構中，是不允許數據和視圖直接通信的，只能通過ViewModel來通信，而ViewModel就是定義了一個Observer觀察者
- ViewModel來通信，而ViewModel就是定義了一個Observer觀察者
- ViewModel 能夠觀察到數據的變化，并對視圖對應的內容進行更新
- ViewModel 能夠監聽到視圖的變化，并能夠通知數據發生改變
至此我們就明白了，Vue就是一個MVVM的實現者，它的核心就是實現了DOM監聽與數據綁定
四、第一個Vue程序
我們在硬盤中創建一個文件夾，叫做vue-first，我們使用IDEA通過Open的方式打開vue-first這個空文件夾：
我們在創建的項目中，創建一個index.html文件，就可以開始我們第一個Vue程序的編寫了！
但是在編寫代碼之前，我們需要打開setting找到Plugins，安裝好Vue的插件：
第一個Vue程序代碼展示：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--1.導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body><!--View層 模板--> <div id="app">{{message}} </div><script>var vm = new Vue({el : '#app',/*Model層 數據*/data : {message : "Hello Vue"}}); </script></body> </html>五、Vue七大屬性
六、常用指令
我們接下來來講解指令，指令的前綴有v-，它們會在渲染的DOM上應用特殊的響應式行為。
1.綁定屬性（v-bind）
我們還可以使用v-bind來綁定元素特性
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><!--1.導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body><!--View層 模板--> <div id="app"><span v-bind:title="message">將鼠標懸浮在此段文字上</span> </div><script>var vm = new Vue({el : '#app',/*Model層 數據*/data : {message : "Hello Vue"}}); </script></body> </html>2.判斷（v-if）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--1.導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--View層--> <div id="app"><h1 v-if="ok">Yes</h1><h1 v-else>No</h1> </div><script>var app = new Vue({el: '#app',data: {ok: true}}) </script> </body> </html>3.循環（v-for）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--1.導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--View層--> <div id="app"><li v-for="item in items">{{item.message}}</li> </div><script>var app = new Vue({el: '#app',data: {items: [{message: '我要學Java'},{message: '我要學前端'},{message: '我要學MySQL'}]}}) </script> </body> </html>4.綁定事件（v-on）
可以用v-on指令監聽DOM事件，并在觸發時運行一些JavaScript代碼
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><!--1.導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--View層--> <div id="app"><button v-on:click="sayHi">click me!</button> </div><script>var app = new Vue({el: '#app',data: {message: "我愛敲代碼"},//方法必須定義在Vue的methods對象中，通過v-on綁定methods: { sayHi: function () {alert(this.message)}}}) </script> </body> </html>總結：我們想要數據放在data屬性中，想要方法放在methods屬性中。想要綁定屬性用v-bind，想要綁定事件用v-on，想要綁定數據用{{ }}
七、數據雙向綁定
雙向綁定是vue的精髓，當數據發生變化時，視圖就發生變化。當視圖發生變化時，數據也跟著發生變化！
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><!--1.導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--View層--> <div id="app"><input type="text" v-model="message"><br>{{message}} </div><script>var app = new Vue({el: '#app',data: {message: "我寫啥，你抄啥"}}) </script> </body> </html>八、Vue組件
組件是可復用的Vue實例，說白了就是一組可以重復使用的模板，跟JSTL的自定義標簽、Thymeleaf的th:fragment 等框架有著異曲同工之妙。通常一個應用會以一棵嵌套的組件樹的形式來組織：
如果我們需要傳遞參數到組件，此時就可以使用props屬性
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><!--1.導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--View層--> <div id="app"><xu v-for="item in items" v-bind:bin="item"></xu> </div><script>//Vue.component()方法注冊一個組件Vue.component("xu",{//傳遞參數用props接收props: ['bin'],//組件模板，可以使用props中的參數template: '<li>{{bin}}</li>'})var app = new Vue({el: '#app',data: {items: ["java","Linux","前端"]}}) </script> </body> </html>九、Vue生命周期
1.Vue生命周期理解
Vue實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載DOM、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。
在Vue的整個生命周期中，它提供了一系列的事件，可以讓我們在事件觸發時注冊JS方法,可以讓我們用自己注冊的JS方法控制整個大局，在這些事件響應方法中的this直接指向的是Vue的實例。
2.Vue生命周期圖解
九、Axios異步通信
由于Vue.js是一個視圖層框架且作者(尤雨溪) 嚴格準守SoC (關注度分離原則)，所以Vue.js并不包含AJAX的通信功能，為了解決通信問題，作者單獨開發了一個名為vue-resource的插件，不過在進入2.0 版本以后停止了對該插件的維護并推薦了Axios 框架。少用jQuery，因為它操作Dom太頻繁!
先在IDEA中創建一個data.json文件，模擬Json數據：
{"name": "xu","age": "20","sex": "男","url": "https://www.baidu.com","address": {"street": "步行街","city": "大連","country": "中國"},"links": [{"name": "bilibili","url": "https://www.bilibili.com"},{"name": "baidu","url": "https://www.baidu.com"},{"name": "xu video","url": "https://www.4399.com"}] }異步通信代碼展示：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><!--導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><!--導入axios--><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script> </head> <body> <div id="vue"><div>{{info.name}}</div><div>{{info.address.street}}</div><a v-bind:href="info.url">點我進入百度</a> </div><script>var vm = new Vue({el: '#vue',//data:vm的屬性data: {}//data():vm方法data(){return{//請求返回參數的格式，得和data.json對應info: {name: null,address: {street: null,city: null,country: null},url: null}}},//鉤子函數，鏈式編程，ES6新特性mounted(){axios.get('../data.json').then(response=>(this.info = response.data))}}) </script> </body> </html>十、Vue計算屬性
計算屬性的重點突出在屬性兩個字上，首先它是個屬性，其次這個屬性有計算的能力，這里的計算就是個函數。
簡單點說，它就是一個能夠將計算結果緩存起來的屬性(將行為轉化成了靜態的屬性)，可以想象為緩存
說明：
- methods：定義方法，調用方法需要帶括號
- computed：定義計算屬性，因為是屬性所以調用不需要帶括號
結論：調用方法時，每次都需要進行計算，既然有計算過程則必定產生系統開銷，那如果這個結果是不經常變化的呢?此時就可以考慮將這個結果緩存起來，采用計算屬性可以很方便的做到這一點，計算屬性的主要特性就是為了將不經常變化的計算結果進行緩存，以節約我們的系統開銷
十一、插槽slot
在Vue.js中我們使用 元素作為承載分發內容的出口，作者稱其為插槽，可以應用在組合組件的場景中;
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title><!--導入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"><todo><todo-title slot="todo-title" v-bind:title="title"></todo-title><todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items></todo> </div><script>//slot 插槽 這個組件要定義在前面不然出不來數據Vue.component("todo", {template: '<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-items"></slot>\</ul>\<div>'});Vue.component("todo-title",{props: ['title'],template: '<div>{{title}}</div>'});Vue.component("todo-items",{props: ['item'],template: '<li>{{item}}</li>'})var app = new Vue({el: '#app',data: {title: "學習內容",todoItems: ['學習Java','學習前端','學習運維']}}) </script> </body> </html>十二、自定義事件內容分發
通過以上代碼不難發現，數據項在Vue的實例中，但刪除操作要在組件中完成，那么組件如何才能刪除Vue實例中的數據呢?此時就涉及到參數傳遞與事件分發了，Vue為我們提供了自定義事件的功能很好的幫助我們解決了這個問題;使用this.$emit(‘自定義事件名’,參數)
十三、vue-cli腳手架
1.什么是vue-cli
vue-cli 官方提供的一個腳手架,用于快速生成一個 vue 的項目模板;
預先定義好的目錄結構及基礎代碼，就好比咱們在創建 Maven 項目時可以選擇創建一個骨架項目，這個骨架項目就是腳手架,我們的開發更加的快速;
主要目的：
- 統一目錄結構
- 本地調試
- 熱部署
- 單元測試
- 集成打包上線
2.使用vue-cli的環境前提
我們使用vue-cli之前，需要安裝node.js！
安裝網址：http://nodejs.cn/download/
安裝成功后：
- cmd中輸入node -v，查看是否能正確打印版本號
- cmd中輸入npm -v，查看是否能正確打印版本號
安裝完node.js之后，就自帶npm，這個npm就是一個軟件包管理工具（類似Maven）！
為了讓我們node.js運行更快，我們需要安裝node.js的淘寶鏡像加速器（cnpm）
# -g 就是全局安裝 npm install cnpm -g # 或使用如下語句解決 npm 速度慢的問題 npm install --registry=https://registry.npm.taobao.org安裝完淘寶鏡像加速器之后，安裝vue-cli
#在命令臺輸入 cnpm install vue-cli -g #查看是否安裝成功 vue list3.創建一個vue-cli程序
創建一個文件夾，作為vue-cli程序的文件夾：D:\IdeaProjects\vue
創建一個基于webpack模板的vue應用程序：
# 這里的myvue是項目名稱 vue init webpack myvue項目下載完成后，cmd中的選項一路選No
然后我們需要在命令行中輸入下列三個命令：
//進入myvue項目中 cd myvue//安裝該項目的所有依賴環境 npm install//啟動了當前項目 npm run dev這樣我們就創建完了第一個vue-cli項目
十四、Webpack打包器
1.什么是webpack
webpack是一個現代JavaScript應用程序的靜態模塊打包器(module bundler)。當webpack處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph),其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個bundle.
Webpack是當下最熱門的前端資源模塊化管理和打包工具，它可以將許多松散耦合的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分離，等到實際需要時再異步加載。
2.安裝webpack
webpack是一個模塊加載器兼打包工具，它能把各種資源都作為模塊來處理和使用，使用該工具的目的：把ES6規范的代碼打包編譯成ES5規范的代碼，使所有瀏覽器都能運行！
安裝命令：
npm install webpack -g npm install webpack-cl -g測試成功安裝：
webpack -v webpack-cli -v這樣我們就安裝完成了！
3.使用webpack
創建一個文件夾：D:\IdeaProjects\vue\webpack-study
使用idea打開該文件夾！
在idea中創建一個modules目錄，里面創建一個hello.js文件：
//暴露一個方法 exports.sayHi = function () {document.write("<h1>徐某學ES6</h1>") }創建main.js 當作是js主入口 , main.js 請求hello.js 調用sayHi()方法：
var hello = require("./hello") hello.sayHi();在主目錄創建webpack.config.js , webpack.config.js 這個相當于webpack的配置文件：
module.exports = {//enrty請求main.js的文件entry: './modules/main.js',//output是輸出的位置和名字output: {filename: "./js/bundle.js"} };在idea命令臺輸入webpack命令（idea要設置管理員啟動）
完成上述操作之后會在主目錄生成一個dist文件 生成的js文件夾路徑為 /dist/js/bundle.js
接下來，在主目錄創建index.html 導入bundle.js
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><!--前端的模塊化開發--> <script src="dist/js/bundle.js"></script></body> </html>十五、vue-router路由
Vue Router是Vue.js官方的路由管理器（視圖跳轉）。它和Vue.js的核心深度集成，讓構建單頁面應用變得易如反掌
vue-router 是一個插件包，所以我們還是需要用 npm/cnpm 來進行安裝的。打開命令行工具，進入你的項目目錄，輸入下面命令：
npm install vue-router --save-dev在components目錄下存放我們編寫的組件，定義Content.vue和Main.vue兩個組件：
<template><h1>內容頁</h1> </template><script>export default {name: "Content"} </script><style scoped></style>========================================================================<template><h1>首頁</h1> </template><script>export default {name: "Main"} </script><style scoped></style>創建一個router目錄，專門存放路由，文件名為index.js：
import Vue from 'vue' //導入路由插件 import VueRouter from 'vue-router' //導入兩個定義的組件 import Content from '../components/Content' import Main from '../components/Main'//安裝路由 Vue.use(VueRouter)//配置導出路由 export default new VueRouter({routes: [{//路由路徑path: '/content',//跳轉的組件component: Content},{//路由路徑path: '/main',//跳轉的組件component: Main}] });在main.js中配置路由：
import Vue from 'vue' import App from './App' import router from './router' //自動掃描里面的路由配置new Vue({el: '#app',//配置路由router,components: { App },template: '<App/>' })在App.vue中使用路由：
<template><div id="app"><h1>Vue-Router</h1><router-link to="/main">首頁</router-link><router-link to="/content">內容頁</router-link><!--展示template模板--><router-view></router-view></div> </template><script>export default {name: 'App' } </script><style> #app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>啟動測試一下 ： npm run dev
其實，main.js配置完了就基本不需要變動了，我們只需要添加組件，在index.js中配置組件路徑，最后在App.vue中添加router-link，基本就足夠了！
三者關系：index.html 調用 main.js 調用 App.vue
十六、vue + elementUI整合小案例
在Idea項目目錄中創建一個hello-vue項目，在該目錄下可以使用命令行（命令行要使用管理員模式！）：
//創建一個基于webpack模板的vue應用程序 vue init webpack hello-vue安裝依賴，我們需要安裝vue-router，element-ui，sass-loader和node-sass四個插件：
//進入目錄 cd hello-vue//安裝vue-router npm install vue-router --save-dev//安裝element ui npm i element-ui -S//安裝依賴 npm install //安裝 SASS 加載器 cnpm install sass-loader node-sass --save-dev//啟動測試 npm run devnpm命令解釋：
安裝模塊到項目目錄下 npm install moduleName-g 的意思是將模塊安裝到全局，具體安裝到磁盤的哪個位置，要看 npm config prefix的位置 npm install -g moduleName–save的意思是將模塊安裝到項目目錄下，并在package文件的dependencies節點寫入依賴，-S為該命令的縮寫 npm install moduleName -save–save-dev的意思是將模塊安裝到項目目錄下，并在package文件的devDependencies節點寫入依賴，-D為該命令的縮寫 npm install moduleName -save-dev接下來，我們打開IDEA將我們創建的項目open一下！
創建一個views目錄，編寫兩個組件：Login.vue和Main.vue
<template><h1>首頁</h1> </template><script>export default {name: "Main"} </script><style scoped></style>========================================================================<template xmlns:v-on=""><div><el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"><h3 class="login-title">歡迎登錄</h3><el-form-item label="賬號" prop="username"><el-input type="text" placeholder="請輸入賬號" v-model="form.username"/></el-form-item><el-form-item label="密碼" prop="password"><el-input type="password" placeholder="請輸入密碼" v-model="form.password"/></el-form-item><el-form-item><el-button type="primary" v-on:click="onSubmit('loginForm')">登錄</el-button></el-form-item></el-form><el-dialogtitle="溫馨提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>請輸入賬號和密碼</span><span slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogVisible = false">確 定</el-button></span></el-dialog></div> </template><script>export default {name: "Login",data() {return {form: {username: '',password: ''},// 表單驗證，需要在 el-form-item 元素中增加 prop 屬性rules: {username: [{required: true, message: '賬號不可為空', trigger: 'blur'}],password: [{required: true, message: '密碼不可為空', trigger: 'blur'}]},// 對話框顯示和隱藏dialogVisible: false}},methods: {onSubmit(formName) {// 為表單綁定驗證功能this.$refs[formName].validate((valid) => {if (valid) {// 使用 vue-router 路由到指定頁面，該方式稱之為編程式導航this.$router.push("/main");} else {this.dialogVisible = true;return false;}});}}} </script><style lang="scss" scoped>.login-box {border: 1px solid #DCDFE6;width: 350px;margin: 180px auto;padding: 35px 35px 15px 35px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;box-shadow: 0 0 25px #909399;}.login-title {text-align: center;margin: 0 auto 40px auto;color: #303133;} </style>創建一個router目錄，編寫index.js文件：
import Vue from 'vue' import Router from 'vue-router'//添加路由 import Main from '../views/Main' import Login from '../views/Login'Vue.use(Router);export default new Router({routes: [{path: '/main',component: Main},{path: '/login',component: Login}] })在main.js中編寫：
import Vue from 'vue' import App from './App'import router from './router'//導入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'Vue.use(router); Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({el: '#app',router,render: h => h(App) //ElementUI })最后App.vue中代碼如下：
<template><div id="app"><router-link to="/login">登錄頁</router-link><router-view></router-view></div> </template><script>export default {name: 'App' } </script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;} </style>效果如下：
十七、路由嵌套
? 嵌套路由又稱子路由，在實際應用中，通常由多層嵌套的組件組合而成。
在 views/user 目錄下創建一個名為 Profile.vue 的視圖組件：
<template><h1>個人信息</h1> </template><script>export default {name: "UserProfile"} </script><style scoped></style>在用戶列表組件在 views/user 目錄下創建一個名為 List.vue 的視圖組件：
<template><h1>用戶列表</h1> </template><script>export default {name: "UserList"} </script><style scoped></style>修改首頁視圖，我們修改 Main.vue 視圖組件，此處使用了 ElementUI 布局容器組件，代碼如下：
<template><div><el-container><el-aside width="200px"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title"><i class="el-icon-caret-right"></i>用戶管理</template><el-menu-item-group><el-menu-item index="1-1"><!--插入的地方--><router-link to="/user/profile">個人信息</router-link></el-menu-item><el-menu-item index="1-2"><!--插入的地方--><router-link to="/user/list">用戶列表</router-link></el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-caret-right"></i>內容管理</template><el-menu-item-group><el-menu-item index="2-1">分類管理</el-menu-item><el-menu-item index="2-2">內容列表</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-caret-right"></i>系統管理</template><el-menu-item-group><el-menu-item index="3-1">用戶設置</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>個人信息</el-dropdown-item><el-dropdown-item>退出登錄</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><!--在這里展示視圖--><router-view /></el-main></el-container></el-container></div> </template> <script>export default {name: "Main"} </script> <style scoped lang="scss">.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;} </style>配置嵌套路由修改 router 目錄下的 index.js 路由配置文件，使用children放入main中寫入子模塊，代碼如下:
import Vue from 'vue' import Router from 'vue-router'//添加路由 import Main from '../views/Main' import Login from '../views/Login'import UserList from '../views/user/List' import UserProfile from '../views/user/Profile'Vue.use(Router);export default new Router({routes: [{path: '/main',component: Main,//嵌套路由children: [{path: '/user/profile',component: UserProfile},{path: '/user/list',component: UserList}]},{path: '/login',component: Login}] })效果展示如下：
十八、參數傳遞
接下來，還是使用上述代碼進行測試！
方式一：取值
方式二：使用props減少耦合
效果如下：
十九、重定向
在router下面index.js的配置：
{path: '/goHome',redirect: '/main' }這里定義了兩個路徑，一個是 /main ，一個是 /goHome，其中 /goHome 重定向到了 /main 路徑，由此可以看出重定向不需要定義組件；
使用的話，只需要在Main.vue設置對應路徑即可；
二十、路由模式與處理404
1.路由模式
路由模式有兩種：
- hash：路徑帶 # 符號，如 http://localhost/#/login
- history：路徑不帶 # 符號，如 http://localhost/login
修改路由配置，index.js代碼如下：
2.處理404
創建于給NotFound.vue的視圖組件：
<template><div><h1>404,你的頁面走丟了</h1></div> </template><script>export default {name: "NotFound"} </script><style scoped></style>修改路由配置，代碼如下：
import NotFound from '../views/NotFound'export default new Router({mode: 'history',routes: [{path: '*',component: NotFound}] })當我們輸入的地址不正確，會出現以下效果：
二十一、路由鉤子與異步請求
1.路由鉤子函數
beforeRouteEnter：在進入路由前執行
beforeRouteLeave：在離開路由前執行
在Profile.vue中寫:
<template><!--所有的元素，不能直接在根節點下--><div><h1>個人信息</h1>{{id}}</div> </template><script>export default {props: ['id'],name: "UserProfile",beforeRouteEnter:(to,from,next)=>{console.log("進入路由之前")next();},beforeRouteLeave:(to,from,next)=>{console.log("進入路由之后")next();}} </script><style scoped></style>參數說明：
- to：路由將要跳轉的路徑信息
- from：路徑跳轉前的路徑信息
- next：路由的控制參數
- next() 跳入下一個頁面
- next(’/path’) 改變路由的跳轉方向，使其跳到另一個路由
- next(false) 返回原來的頁面
- next((vm)=>{}) 僅在 beforeRouteEnter 中可用，vm 是組件實例
2.在鉤子函數中使用異步通信
效果如下：
總結
以上是生活随笔為你收集整理的Vue框架详解（适合Java学习者）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机桌面水平移动的小软件,一键整理电脑
- 下一篇： Vue框架总结（一、Vue基础知识）