私人博客
許小墨のBlog —— 菜雞博客直通車
系列文章完整版，配圖更多，CSDN博文圖片需要手動上傳，因此文章配圖較少，看不懂的可以去菜雞博客參考一下配圖！
系列文章目錄
前端系列文章——傳送門
后端系列文章——傳送門
腳手架和路由
腳手架
概念
腳手架是為了更加快速的架構(gòu)整個項目的結(jié)構(gòu)和基礎(chǔ)業(yè)務(wù)，開發(fā)者開發(fā)出來的一個工具。利用該工具可以執(zhí)行一行命令就將項目的結(jié)構(gòu)以及基礎(chǔ)的業(yè)務(wù)架構(gòu)好。
express有腳手架，可以快速搭建后端接口項目的結(jié)構(gòu)，以及基礎(chǔ)的用戶請求模塊。。。
vue也有vue的腳手架，可以快速搭建vue項目的結(jié)構(gòu)和基礎(chǔ)業(yè)務(wù)。。。
vue的腳手架：
- vue-cli - 舊版，現(xiàn)在基本不用
- @vue/cli - 新生代，現(xiàn)在還有很多在用，也有人在用更新的
腳手架的使用
下載安裝：
npm i @vue/cli -g
檢查版本：
vue --version # 簡寫 vue -V(大寫)
創(chuàng)建項目：
vue create 項目名稱（用英文）
當(dāng)使用npm多次下載失敗的時候，cnpm比npm牛逼，yarn更牛逼，用流量是萬能的。
項目目錄結(jié)構(gòu)
public存放了一個現(xiàn)在正運(yùn)行的index.html，不要改動
src項目主要文件夾：
assets存放靜態(tài)資源的文件夾
components存放所有組件的文件夾
App.vue根組件，將來我們自己寫的其他組件最終都會在這個根組件中顯示
main.js項目入口文件，默認(rèn)顯示根組件是這個文件配置的
項目運(yùn)行
進(jìn)入項目目錄執(zhí)行命令：
npm run serve
這個命令是在開發(fā)階段使用的，我們看到的頁面是將代碼打包到內(nèi)存中運(yùn)行的。
當(dāng)項目開發(fā)完成以后，項目需要打包，將打包好的文件上線，此時需要執(zhí)行打包命令：
npm run build
單文件組件
vue項目其實是一個單頁面應(yīng)用程序，所有的文件互相引入，最終都被引入到了一個文件中main.js中，然后這個文件被打包好，引入到public下的index.html中使用。
我們通過腳手架創(chuàng)建的項目結(jié)構(gòu)中，src文件夾下大多都是vue后綴的文件，這種文件其實都被引入到其他文件中使用了，一個vue文件屬于一個獨立的組件，我們稱之為單文件組件。
單文件組件中要求要有3部分內(nèi)容：
- emplate標(biāo)簽 - 寫html結(jié)構(gòu)
- script標(biāo)簽 - 寫當(dāng)前組件中的邏輯
- style標(biāo)簽 - 寫當(dāng)前組件中的樣式
例如：App.vue
eslint規(guī)范
- 每行結(jié)束不允許加分號
- 函數(shù)定義的小括號左右要有空格
- 分支語句的小括號和大括號左右要有空格
- 箭頭函數(shù)的箭頭和小括號以及大括號左右要有空格
- 鍵值對的冒號和值之間要有空格
- 循環(huán)語句的小括號和大括號左右要有空格
- for循環(huán)語句小括號中的三要素之間要有空格
- js中所有引號使用單引號
- 運(yùn)算符左右要有空格
- template、script和style標(biāo)簽之間要有空行
- 所有導(dǎo)入文件的語句要放在代碼最前面
- 縮進(jìn)等同于2個空格，不能是1個和4個
- 數(shù)組和對象的值之間要有空格
- 文件末尾要有空行
路由
介紹
路由指的是頁面顯示的內(nèi)容跟請求使用的路徑之間的對應(yīng)關(guān)系。例如：我們在nodejs后端項目中，指定某個路徑來請求，響應(yīng)對應(yīng)的內(nèi)容，就叫路由。
路由分為兩種：前端路由和后端路由。
后端通過請求路徑和內(nèi)容對應(yīng)，前端路由通過事件觸發(fā)控制不同的內(nèi)容顯示。
前端路由實現(xiàn)
前端路由通常有兩種：hash模式和history模式。
hash模式
hash使用錨點控制不同的內(nèi)容顯示。
頁面監(jiān)聽錨點變化，當(dāng)錨點發(fā)生變化的時候，讓對應(yīng)的內(nèi)容顯示。事件名 - hashchange
例：
<body>
<a href="#/index">首頁</a><hr>
<a href="#/list">列表頁</a><hr>
<a href="#/detail">詳情頁</a><hr>
<div id="route-view"></div>
</body>
<script type="text/javascript">
// 獲取元內(nèi)容素
var ctn = document.getElementById('route-view')
// 默認(rèn)渲染
render('/index')
// 監(jiān)聽hashchange事件
window.addEventListener('hashchange',function(){
render(location.hash.slice(1))
})
function render(router){
switch (router) {
case '/index':
ctn.innerHTML = '這是首頁'
break;
case '/list':
ctn.innerHTML = '這是列表頁'
break;
case '/detail':
ctn.innerHTML = '這是詳情頁'
break;
default:
ctn.innerHTML = '404頁面'
break;
}
}
</script>
history模式
history模式通過監(jiān)聽歷史記錄切換，然后更改當(dāng)前地址實現(xiàn)路由跳轉(zhuǎn)。事件類型 - popstate。
改變當(dāng)前地址 - history.pushState()
例：
<body>
<button class="index" href="/index">首頁</button>
<button class="list" href="/list">列表頁</button>
<button class="detail" href="/detail">詳情頁</button>
<div id="app">
內(nèi)容區(qū)域
</div>
</body>
<script>
var btns = document.querySelectorAll('button');
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
var link = this.getAttribute('href')
history.pushState({link},null,link)
render(link)
}
}
function render(link){
switch(link){
case '/index':
app.innerHTML = '<h1>這是首頁</h1>';
break;
case '/list':
app.innerHTML = '<h1>這是列表頁</h1>';
break;
case '/detail':
app.innerHTML = '<h1>這是詳情頁</h1>';
break;
}
}
window.addEventListener('popstate',(e)=>{
console.log(666);
render(location.pathname)
})
render('/index')
</script>
注意：對于歷史記錄的監(jiān)聽和更改，必須在服務(wù)器環(huán)境訪問有效。
VueRouter
vue-router是vue.js官方提供的路由管理器，讓vue在實現(xiàn)單頁面應(yīng)用程序的時候，變得更加簡單。作用就是指定當(dāng)前是哪個錨點，需要在頁面加載哪個組件。提供一套指路的路由規(guī)則。
基本使用
下載安裝：
npm i vue-router
在src中新建router文件夾，用于寫路由文件。在router中新建index.js來創(chuàng)建路由配置文件：
// 1.導(dǎo)入vue和vue-router
import Vue from "vue"
import VueRouter from "vue-router"
// 4.導(dǎo)入單文件組件
import Friend from "@components/Friend"
import Music from "@components/Music"
// 2.通過vue使用VueRouter - 讓VueRouter在vue中生效
Vue.use(VueRouter)
// 3.配置路由規(guī)則
const routes = [
{
path: '/friend',
component: Friend
},
{
path: '/music',
component: Music
}
]
// 5.定義路由對象
const router = new VueRouter({
routes,
// 切換路由模式，默認(rèn)是hash
mode: 'history'
})
// 6.導(dǎo)出路由對象
export default router
在main.js入口文件中配置路由并使之生效
import Vue from 'vue'
import App from './App.vue'
// 導(dǎo)入路由對象
import router from '@router/index'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
// 將路由對象配置到vue實例中
router
}).$mount('#app')
在組件中放置路由出口 - 顯示某個路由組件的內(nèi)容
<router-view></router-view>
定義兩個路由對應(yīng)的單文件組件。然后就可以在瀏覽器中通過錨點來訪問了。
導(dǎo)航方式
含義：從一個地址跳轉(zhuǎn)到另一個地址/從一個組件切換到另一個組件。
聲明式導(dǎo)航
含義：通過點擊鏈接跳轉(zhuǎn)的方式，比如html中的a標(biāo)簽。
聲明式導(dǎo)航的原理就是a標(biāo)簽，只是在vue中，對a標(biāo)簽進(jìn)行組件封裝，語法如下：
<router-link to="/index">首頁</router-link>
當(dāng)點擊這個鏈接的時候，就能將地址欄中的錨點換成#/index
如果需要傳參，直接將參數(shù)跟在地址的?后面
還可以使用v-bind指令：
<router-link :to="{path: '/index'}">首頁</router-link>
這種方式要傳參的話，可以在對象中添加query屬性：
<router-link :to="{path: '/index', query: {id: 10}}">首頁</router-link>
參數(shù)數(shù)據(jù)傳遞到另一個組件中， 不同的傳遞方式，接收數(shù)據(jù)的時候方式也是不同的，通過地址后加?和path配合query傳的數(shù)據(jù)，在組件的方法中使用以下方式接收：
this.$route.query
在模板中使用以下方式接收：
{{$route.query}
默認(rèn)情況下，router-link標(biāo)簽編譯成html以后就是a標(biāo)簽，但是vue給router-link標(biāo)簽提供了一個屬性，可以讓router-link標(biāo)簽編譯成其他標(biāo)簽，這個屬性叫tag，例：
<router-link :to="{path: '/index', query: {id: 10}}" tag="p">首頁</router-link>
點擊同樣可以切換組件，可是編譯后的標(biāo)簽卻不是a標(biāo)簽，而是指定的p標(biāo)簽。不用a標(biāo)簽的好處就是能靈活的設(shè)置樣式。
編程式導(dǎo)航
含義：通過js跳轉(zhuǎn)。
語法如下：
this.$router.push("/login"); // 傳參也可以在地址后面加?加參數(shù)
this.$router.push({path: "/login"});
this.$router.push({path: '/login', query: {id: 10}});
this.$router.go(n); // 使用方式跟history.go()一樣
this.$router.back(); // 返回上一個頁面
如果使用編程式導(dǎo)航跳轉(zhuǎn)到當(dāng)前頁的時候，會有一個報錯提示，但不影響效果
如果不想讓這個報錯發(fā)生，可以在路由配置文件：router/index.js中配置屏蔽這個錯誤：
// 該段代碼不需要記，理解即可
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch((err) => err);
};
命名路由
含義：給路由定義名稱，有名稱的路由。
當(dāng)一個路由又了名稱之后，我們在跳轉(zhuǎn)的時候就可以使用路由的名稱來指定跳轉(zhuǎn)哪個路由。
給路由指定名稱使用name鍵：
const routes = [
{
name: 'index',
path: '/index',
component: Index
},
{
name: 'list',
path: '/list',
component: List
},
{
path: '/detail',
name: 'detail',
component: Detail
}
]
跳轉(zhuǎn)時，通過路由名稱跳轉(zhuǎn)：
<router-link :to="{name: 'index'}">首頁</router-link>
如果要傳遞參數(shù)，必須使用params鍵配合name鍵：
<router-link :to="{name: '/index', params: {id: 10}}">首頁</router-link>
編程式導(dǎo)航中也可以使用命名路由：
this.$router.push({name: 'login‘);
this.$router.push({name: 'login', params: {id: 10}});
使用name配合params傳值的，在組件的方法中使用以下方式接收：
this.$route.params
在模板中使用以下方式接收：
{{$route.params}}
路由重定向
含義：將原本要跳轉(zhuǎn)的路由，強(qiáng)制跳轉(zhuǎn)到另一個路由中。例如：我們要請求到購物車頁面，但是沒有登錄，就會被強(qiáng)制跳轉(zhuǎn)到登錄頁面。也就是當(dāng)我們訪問路由/cart，但瀏覽器會將url替換成/login
實現(xiàn)方式：在路由規(guī)則中添加redirect鍵，值為新的路由。
語法如下：
const routes = [
{
path: '/cart',
redirect: '/login'
}
]
上面代碼表示，當(dāng)訪問/a路由的時候，會被強(qiáng)制跳轉(zhuǎn)到/login路由
redirect的值可以是一個指定的路由地址，也可以指定路由的名稱：
const routes = [
{
path: '/cart',
redirect: {
name: 'login'
}
},
{
path: '/login',
name: 'login',
component: Login
}
]
路由嵌套
在實際的項目中，很多組件中的內(nèi)容也都是由多個小模塊組成的，每個小模塊可以當(dāng)做是一個組件，每個組件可以對應(yīng)一個路由。
一個項目由多個組件組成，每個組件都可以通過路由訪問到。
每個組件由多個小組件組成，每個小組件也可以通過路由訪問到。
這樣就形成了路由的嵌套了。路由嵌套通過路由對象的children鍵設(shè)置。語法如下：
const routes = [
{
path: '/user',
component: User
children: [
{
path: 'index',
component: UserIndex
},
{
path: 'add',
component: UserAdd
},
{
path: 'edit',
component: UserEdit
}
]
},
{
path: '/goods',
component: Goods
}
]
上面的規(guī)則表示，當(dāng)訪問/user路由的時候，顯示User組件，當(dāng)訪問/user/add路由的時候，就可以在User組件中顯示UserAdd組件，當(dāng)訪問user/index路由的時候就可以在User組件中顯示UserIndex組件。。。
使用時需要在組件中添加顯示子組件視圖的標(biāo)簽。
子路由在定義的時候path路徑中不能包含/，否則代表從根路由開始
例：
定義上面的路由規(guī)則。創(chuàng)建Goods組件和User組件，User組件內(nèi)容如下：
<template>
<div>
<h3>用戶頁</h3>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
分別創(chuàng)建User組件文件、Goods組件文件、UserIndex組件、UserAdd組件、UserEdit組件，然后在瀏覽器中通過路徑訪問。
404路由
含義：當(dāng)訪問的路徑在所有路由配置中都找不到，在瀏覽器中會報錯，為了給用戶有更好的體驗感，我們可以指定，當(dāng)匹配不到路由的時候，顯示一個比較友好的提示。
使用方式，就是在路由配置的最下面，添加path鍵為*的路由，交給指定的組件來處理
vue中的路由是從上到下匹配的，匹配不到路由，是從上到下將所有路由都進(jìn)行匹配過才得到的，所以404路由會在所有路由的最下面。
例：
const routes = [
{ path: "/about", component: About },
{ path: "/news", component: News },
// 404路由
{ path: "*", component: NotFound },
];
動態(tài)路由匹配
含義：動態(tài)路由指的是在路由規(guī)則中，有部分的規(guī)則是動態(tài)的，會發(fā)生變化的，不是固定的值。這種路由就叫做動態(tài)路由。
動態(tài)路由主要是針對于restful的。
路由定義語法：
// 傳遞參數(shù)id
var router = new VueRouter({
// routes是路由規(guī)則數(shù)組
routes: [
{ path: '/user/:id', component: User },
// 此處的“:”只是在聲明的時候?qū)?，在使用的時候不需要寫“:”
]
})
獲取動態(tài)路由傳遞的參數(shù)：
// 組件視圖中獲取id值（html-vue形式組件）
const User = {
template: '<div>User ID is {{$route.params.id}}</div>'
}
可選參數(shù)的定義：文章來源：http://www.zghlxwxcb.cn/news/detail-442228.html
{ path: "showdetail/:id?", component: ShowDetail },
注
本博文缺失大量圖片，嚴(yán)重影響內(nèi)容完整性以及閱讀體驗，完整內(nèi)容請前往本人菜雞博客——許小墨のBlog文章來源地址http://www.zghlxwxcb.cn/news/detail-442228.html
到了這里，關(guān)于Vue中的腳手架和路由的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
