創建工程
- 創建要給名爲 hello-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 dev- npm 命令解釋：
- npm install moduleName：安裝模塊到項目目錄下
- npm install -g moduleName：-g 的意思是將模塊安裝到全局，具體安裝到磁盤哪個位置，要看 npm config prefix 的位置
- npm install -save moduleName：–save 的意思是將模塊安裝到項目目錄下，並在 package 文件的 dependencies 節點寫入依賴，-S 爲該命令的縮寫
- npm install -save-dev moduleName：–save-dev 的意思是將模塊安裝到項目目錄下，並在 package 文件的 devDependencies 節點寫入依賴，-D 爲該命令的縮寫
創建登錄頁面
- 把沒有用的初始化東西刪掉！
- 完善目錄結構：
- 創建首頁視圖，在 views 目錄下創建一個名爲 Main.vue 的視圖組件
<template> <div>首頁</div> </template> <script> export default { name: "Main" } </script> <style scoped> </style>- 創建登錄頁視圖在 views 目錄下創建一個名爲 Login.vue 的視圖組件，其中 el-* 的元素爲 ElementUI 組件
<template> <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-dialog title="溫馨提示" :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 的 vue-router 路由配置文件
import Vue from 'vue' import Router from 'vue-router' import Login from '../views/Log' import Main from '../views/Main' Vue.use(Router); export default new Router({ routes: [ { // 登錄頁 path: '/login', name: 'Login', component: Login }, { // 首頁 path: '/main', name: 'Main', component: Main } ] });- 配置路由，修改入口代碼，修改 main.js 入口代碼
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' // 導入路由 import router from './router' // 導入 ElementUI import ElementUI from 'element-ui' // 使用 element-ui 還需要導入一個 css 文件 import 'element-ui/lib/theme-chalk/index.css' // 安裝路由 Vue.use(router); // 安裝 ElementUI Vue.use(ElementUI); new Vue({ el: '#app', // 啓用路由 router, // 啓用 ElementUI render: h => h(App) });- 修改 App.vue 組件代碼
<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script>
測試
- 控制檯輸入：cnpm run dev
- 可能會報錯，出現 sass-loader 版本過高的問題，改成 7.3.1 即可
- 在瀏覽器打開http://localhost:8080/#/login
嵌套路由
- 嵌套路由又稱子路由，在實際應用中，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態路徑也按某種結構對應嵌套的各層組件，例如：
/user/foo/profile /user/foo/posts +------------------+ +-----------------+ | User | | User | | +--------------+ | | +-------------+ | | | Profile | | +------------> | | Posts | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+- 用戶信息組件，在 views/user 目錄下創建一個名爲 Profile.vue 的視圖組件
<template> <div> 個人信息 </div> </template> <script> export default { name: "UserProfile" } </script> <style scoped> </style>- 用戶列表組件在 views/user 目錄下創建一個名爲 List.vue 的視圖組件
<template> <div> 用戶列表 </div> </template> <script> export default { name: "UserList" } </script> <style scoped> </style>- 配置嵌套路由修改 router 目錄下的 index.js 路由配置文件
import Vue from 'vue' import Router from 'vue-router' import Login from '../views/Log' import Main from '../views/Main' // 用於嵌套的路由組件 import List from '../views/user/List' import Profile from '../views/user/Profile' Vue.use(Router); export default new Router({ routes: [ { // 登錄頁 path: '/login', name: 'Login', component: Login }, { // 首頁 path: '/main', name: 'Main', component: Main, // 配置嵌套路由 children: [ { path: '/user/profile', component: Profile }, { path: '/user/list', component: List } ] } ] });- 說明：主要在路由配置中增加了 children 數組配置，用於在該組件下設置嵌套路由
- 修改首頁視圖，我們修改 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-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>說明：在 元素中配置了 用於展示嵌套路由,主要使用 個人信息 展示嵌套路由內容
參數傳遞
- 我們經常需要把某種模式匹配到的所有路由，全都映射到同個組件。例如，我們有一個 User 組件，對於所有 ID 各不相同的用戶，都要使用這個組件來渲染。此時我們就需要傳遞參數了
- 修改路由配置, 主要是在 path 屬性中增加了 :id 這樣的佔位符
{ path: '/user/profile/:id', name: UserProfile, component: UserProfile }- 傳遞參數
- 此時我們將 to 改爲了 :to，是爲了將這一屬性當成對象使用，注意 router-link 中的 name 屬性名稱 一定要和路由中的 name 屬性名稱匹配，因爲這樣 Vue 才能找到對應的路由路徑
<!-- name: 傳組件名, params: 傳遞參數, 因爲需要對象綁定,則使用 v-bind:to 簡寫爲 :to --> <router-link :to="{name: 'UserProfile', params: {id:1}}">個人信息</router-link>- 接收參數, 在目標組件中
<!-- 在 template 中的元素,不能直接在根節點下,需要使用標籤包含起來,要不然會報錯 --> <!-- text {{$route.params.id}}" outside root element will be ignored. --> <div> <h1>個人信息</h1> {{$route.params.id}} </div>
使用 props 的方式
- 修改路由配置 , 主要增加了 props: true 屬性
{ path: '/user/profile/:id', name:'UserProfile', component: UserProfile, props: true }- 傳遞參數和之前一樣
- 接收參數爲目標組件增加 props 屬性
<template> <div> 個人信息 {{id}} </div> </template> <script> export default { props: ['id'], name: "UserProfile" } </script> <style scoped> </style>
組件重定向
- 重定向的意思大家都明白，但 Vue 中的重定向是作用在路徑不同但組件相同的情況下，比如：
{ path: '/main', name: 'Main', component: Main }, { // 重定向到 main 頁面 path: '/goHome', redirect: '/main' }- 說明：這裏定義了兩個路徑，一個是 /main ，一個是 /goHome，其中 /goHome 重定向到了 /main 路徑，由此可以看出重定向不需要定義組件
- 使用的話，只需要設置對應路徑即可
<el-menu-item index="1-3"> <router-link to="/goHome">回到首頁</router-link> </el-menu-item>
路由模式與 404
- 路由模式有兩種：
- hash：路徑帶 # 符號，如 http://localhost/#/login
- history：路徑不帶 # 符號，如 http://localhost/login
- 修改路由配置，代碼如下：
export default new Router({ mode: 'history', routes: [ ] });- 處理 404 創建一個名爲
NotFound.vue的視圖組件，代碼如下：<template> <div> <h1>404, 你的頁面走丟了</h1> </div> </template> <script> export default { name: "NotFount" } </script> <style scoped> </style>- 修改路由配置，代碼如下：
import NotFound from '../views/NotFound' { path: '*', component: NotFound }
路由鉤子與異步請求
beforeRouteEnter：在進入路由前執行beforeRouteLeave：在離開路由前執行- 上代碼：
export default { props: ['id'], name: "UserProfile", beforeRouteEnter: (to, from, next) => { console.log("準備進入個人信息頁"); next(); }, beforeRouteLeave: (to, from, next) => { console.log("準備離開個人信息頁"); next(); } }參數說明：
- to：路由將要跳轉的路徑信息
- from：路徑跳轉前的路徑信息
- next：路由的控制參數
- next() 跳入下一個頁面
- next(’/path’) 改變路由的跳轉方向，使其跳到另一個路由
- next(false) 返回原來的頁面
- next((vm)=>{}) 僅在 beforeRouteEnter 中可用，vm 是組件實例
- 在鉤子函數中使用異步請求
- 安裝 Axios
cnpm install --save vue-axios在main.js引用 Axios// 引入 axios import axios from 'axios' import VueAxios from 'vue-axios' // 安裝 VueAxios Vue.use(VueAxios, axios);- 準備數據 ：只有我們的 static 目錄下的文件是可以被訪問到的，所以我們就把靜態文件放入該目錄下。
// 靜態數據存放的位置 static/mock/data.json- 在 beforeRouteEnter 中進行異步請求
export default { props: ['id'], name: "UserProfile", beforeRouteEnter: (to, from, next) => { console.log("進入路由之前"); // 加載數據 // 注意,一定要在 next 中請求,因爲該方法調用時 Vue 實例還沒有創建, // 此時無法獲取到 this 對象,在這裏使用官方提供的回調函數拿到當前實例 next(vm => { // 進入路由之前,執行getData()方法 vm.getData(); }); }, beforeRouteLeave: (to, from, next) => { console.log("準備離開個人信息頁"); next(); }, methods: { getData: function () { this.axios({ method: 'get', url: 'http://localhost:8080/static/mock/data.json' }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); } } }