2018-09-24
說(shuō)到Vue.js常用插件，今天我們就一起來(lái)學(xué)習(xí)他的核心插件路由（vue-router）。
①Vue.js 路由允許我們通過(guò)不同的 URL 訪問(wèn)不同的內(nèi)容。
②通過(guò) Vue.js 可以實(shí)現(xiàn)多視圖的單頁(yè)Web應(yīng)用（single page web application，SPA）；(通俗來(lái)說(shuō)就是：創(chuàng)建單頁(yè)面SPA)。
firstly：安裝
①直接下載/CDN：https://unpkg.com/vue-router/dist/vue-router.js。
②NPM：打開(kāi)Git Bash Here,輸入指令npm install vue-router.。
secondly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a></a>
<div id='app'>
<!--1.創(chuàng)建一個(gè)鏈接-->
<!-- 使用 router-link 組件來(lái)導(dǎo)航. -->
<!-- 通過(guò)傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
<router-link to='/home'>首頁(yè)</router-link>
<router-link to='/user'>用戶頁(yè)</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<!-- 盛放鏈接對(duì)應(yīng)的內(nèi)容-->
<router-view></router-view>
</div>
<script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script>
//2.創(chuàng)建組件
var Home={
template:`
<h1>這是首頁(yè)</h1>
`
}
var User={
template:`
<h1>這是用戶頁(yè)</h1>
`
}
//3.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/user',component:User}
]
//4.創(chuàng)建路由實(shí)例
//創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置
const router=new VueRouter({
//也可以簡(jiǎn)寫(xiě)為routers
routes:routes
})
//5.路由實(shí)例掛載到vue實(shí)例上
// 記得要通過(guò) router 配置參數(shù)注入路由，
// 從而讓整個(gè)應(yīng)用都有路由功能
new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
之后，我們一起來(lái)看一下其中的細(xì)節(jié)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 兩種方式都可以改變鏈接字體的顏色*/
/*
.router-link-active{
color:red;
}
*/
.active{
color:red;
}
</style>
</head>
<body>
<a></a>
<div id='app'>
<!--1.-->
<router-link to='/home'>首頁(yè)</router-link>
<router-link to='/user'>用戶頁(yè)</router-link>
<!-- 盛放鏈接對(duì)應(yīng)的內(nèi)容-->
<router-view></router-view>
</div>
<script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script>
//2.創(chuàng)建組件
var Home={
template:`
<h1>這是首頁(yè)</h1>
`
}
var User={
template:`
<h1>這是用戶頁(yè)</h1>
`
}
//3.配置路由
const routes=[
//添加一個(gè)新的路徑，也就是第一個(gè)，當(dāng)頁(yè)面加載完成時(shí)直接顯示
{path:'/',component:Home},
{path:'/home',component:Home},
{path:'/user',component:User}
]
//4.創(chuàng)建路由實(shí)例
const router=new VueRouter({
routes:routes,
linkActiveClass:'active'
})
//5.路由實(shí)例掛載到vue實(shí)例上
new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
效果圖：
接下來(lái)的就是路由的嵌套:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<!--1.-->
<router-link to='/index'>首頁(yè)</router-link>
<router-link to='/user'>用戶頁(yè)</router-link>
<router-view></router-view>
</div>
<script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script>
//2.創(chuàng)建組件
var Index={
template:`
<h1>這是首頁(yè)</h1>
`
}
var User={
template:`
<div>
<h1>這是用戶頁(yè)</h1>
<ul>
<li>
<router-link to='/user/regist'>注冊(cè)</router-link>
</li>
<li>
<router-link to='/user/login'>登錄</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}
var Regist={
template:`
<h3>這是注冊(cè)頁(yè)</h3>
`
}
var Login={
template:`
<h3>這是登錄頁(yè)</h3>
`
}
//3.配置路由
const routes=[
{path:'/',component:Index},
{path:'/index',component:Index},
{
path:'/user',
component:User,
children:[
{path:'regist',component:Regist},
{path:'login',component:Login}
]
}
]
//4.創(chuàng)建路由實(shí)例
const router=new VueRouter({
routes:routes
})
//5.把路由實(shí)例掛載到vue實(shí)例上
new Vue({
el:'#app',
router:router//注冊(cè)路由
})
</script>
</body>
</html>
效果圖：
QAQ:
①v-html
v-html='',可以解析標(biāo)簽
更新元素的innerHTML 。注意：內(nèi)容按普通 HTML 插入 - 不會(huì)作為 Vue 模板進(jìn)行編譯 。如果試圖使用 v-html 組合模板，可以重新考慮是否通過(guò)使用組件來(lái)替代。
<div v-html="html"></div>
②v-text
v-text='',可以輸出，但不可以解析標(biāo)簽
更新元素的textContent。如果要更新部分的 textContent ，需要使用{{ Mustache }}插值。
<span v-text="msg"></span>
<span>{{msg}}</span>
③v-once
只綁定一次(直接寫(xiě),不需要表達(dá)式)==>
只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)。這可以用于優(yōu)化更新性能。
④v-pre
原樣輸出(直接寫(xiě),不需要表達(dá)式)
跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程。可以用來(lái)顯示原始 Mustache 標(biāo)簽。跳過(guò)大量沒(méi)有指令的節(jié)點(diǎn)會(huì)加快編譯。
⑤v-cloak
用屬性選擇器：
css:[v-cloak]{
display:none;
}
html:<div v-cloak>
{{ message }}
</div>
QAQ:
var，let，const的異同==>
1.var定義的變量，沒(méi)有塊的概念，可以跨塊訪問(wèn), 不能跨函數(shù)訪問(wèn)。
2.let定義的變量，只能在塊作用域里訪問(wèn)，不能跨塊訪問(wèn)，也不能跨函數(shù)訪問(wèn)。
3.const用來(lái)定義常量，使用時(shí)必須初始化(即必須賦值)，只能在塊作用域里訪問(wèn)，而且不能修改。
路由今天就學(xué)到這里，我們下期再見(jiàn)QAQ~
·
