vue-router
vue-router
- 用 Vue.js + vue-router 創(chuàng)建單頁應(yīng)用才菠，是非常簡單的谣辞。使用 Vue.js 兆沙，我們已經(jīng)可以通過組合組件來組成應(yīng)用程序猪勇，當(dāng)你要把 vue-router 添加進(jìn)來，我們需要做的是浓体，將組件(components)映射到路由(routes)泡挺，然后告訴 vue-router 在哪里渲染它們
1.單頁面應(yīng)用程序特點(diǎn):
- 1.起始至終都在一個(gè)頁面當(dāng)中, 不會(huì)發(fā)生頁面的跳轉(zhuǎn)
- 2.加載數(shù)據(jù)都通過發(fā)送AJAX請(qǐng)求來獲取內(nèi)容.(顯示加載中)
- 3.可以去做webApp
- 4.加載的性能會(huì)高一些,都是異步加載
- 5.對(duì)用戶比較友好, 在加載過程當(dāng)中, 可以提示用戶正在加載中...
- 原理:在每一次錨點(diǎn)發(fā)生變化時(shí), 去向服務(wù)器發(fā)送網(wǎng)路請(qǐng)求.
- 服務(wù)器把請(qǐng)求結(jié)果,插入到文檔當(dāng)中
河馬牙醫(yī)
2. #的涵義
-
#代表網(wǎng)頁中的一個(gè)位置辈讶。其右面的字符命浴，就是該位置的標(biāo)識(shí)符。比如,http://www.example.com/index.html#print
就代表網(wǎng)頁index.html的print位置贱除。瀏覽器讀取這個(gè)URL后生闲，會(huì)自動(dòng)將print位置滾動(dòng)至可視區(qū)域。
二月幌、HTTP請(qǐng)求不包括#
-
#是用來指導(dǎo)瀏覽器動(dòng)作的碍讯，對(duì)服務(wù)器端完全無用。所以扯躺，HTTP請(qǐng)求中不包括#捉兴。
比如蝎困，訪問下面的網(wǎng)址，http://www.example.com/index.html#print倍啥，瀏覽器實(shí)際發(fā)出的請(qǐng)求是這樣的：
GET /index.html HTTP/1.1
Host: www.example.com
三禾乘、#后的字符
- 在第一個(gè)
#后面出現(xiàn)的任何字符，都會(huì)被瀏覽器解讀為位置標(biāo)識(shí)符虽缕。這意味著始藕，這些字符都不會(huì)被發(fā)送到服務(wù)器端。
比如氮趋，下面URL的原意是指定一個(gè)顏色值：http://www.example.com/?color=#fff伍派，但是，瀏覽器實(shí)際發(fā)出的請(qǐng)求是：
GET /?color= HTTP/1.1
Host: www.example.com
四剩胁、改變#不觸發(fā)網(wǎng)頁重載
- 單單改變
#后的部分诉植，瀏覽器只會(huì)滾動(dòng)到相應(yīng)位置，不會(huì)重新加載網(wǎng)頁摧冀。
比如倍踪，從http://www.example.com/index.html#location1改成http://www.example.com/index.html#location2，瀏覽器不會(huì)重新向服務(wù)器請(qǐng)求index.html索昂。
五建车、改變#會(huì)改變?yōu)g覽器的訪問歷史
- 每一次改變#后的部分，都會(huì)在瀏覽器的訪問歷史中增加一個(gè)記錄椒惨，使用"后退"按鈕缤至，就可以回到上一個(gè)位置。這對(duì)于ajax應(yīng)用程序特別有用康谆，可以用不同的
#值领斥，表示不同的訪問狀態(tài)，然后向用戶給出可以訪問某個(gè)狀態(tài)的鏈接沃暗。值得注意的是月洛，上述規(guī)則對(duì)IE 6和IE 7不成立，它們不會(huì)因?yàn)?code>#的改變而增加歷史記錄孽锥。
- 重定向:就是通過各種方法將各種網(wǎng)絡(luò)請(qǐng)求重新定個(gè)方向轉(zhuǎn)到其它位置
vue-router 2.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
width: 600px;
height: 60px;
line-height: 60px;
background: #000;
margin: 50px auto;
margin-bottom: 0px;
}
.nav ul {
display: flex;
}
.nav ul li {
flex: 1;
text-align: center;
}
.nav ul li a{
color: #fff;
text-decoration: none;
}
.content{
width: 600px;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="app">
<div class="nav">
<ul>
<li><a v-link="{path:'/home/1'}">首頁</a></li>
<li><a v-link="{path:'/music/2'}">音樂</a></li>
<li><a v-link="{path:'/singer/3'}">歌手</a></li>
</ul>
</div>
<div class="content">
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
</div>
<!--首頁模版-->
<template id="temp1">
<h1>首頁內(nèi)容</h1><p>{{$route.params.id}}</p>
<a v-link="{path:'/home/1/login'}">登錄</a>
<a v-link="{path:'/home/1/regist'}">注冊(cè)</a>
<!--路由匹配到的組件將渲染在這里-->
<router-view></router-view>
</template>
</body>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//路由,有一個(gè)根組織
//路由傳參數(shù): $route.params.id
//1.實(shí)例化組件
var root = Vue.extend();
//2.創(chuàng)建路由對(duì)象
var router = new VueRouter();
//3.配置路由
router.map({
'/home/:id':{
component:{
//template:'<h1>首頁</h1><p>{{$route.params.id}}</p>'
template:'#temp1'
},
//子路由
//home/1/login
//home/1/regist
subRoutes:{
'/login':{
component:{
template:'<h1>登錄信息</h1>'
}
},
'/regist':{
component:{
template:'<h1>注冊(cè)信息</h1>'
}
}
}
},
'/music/:id':{
component:{
template:'<h1>音樂</h1><p>{{$route.params.id}}</p>'
}
},
'/singer/:id':{
component:{
template:'<h1>歌手</h1><p>{{$route.params.id}}</p>'
}
}
});
//設(shè)置路由默認(rèn)跳轉(zhuǎn)
//重定向:就是通過各種方法將各種網(wǎng)絡(luò)請(qǐng)求重新定個(gè)方向轉(zhuǎn)到其它位置
router.redirect({
'/':'/home/1/login'
});
//4.開啟路由
router.start(root, '#app');
//5.設(shè)置跳轉(zhuǎn) v-link="path:'/home'"
//6.設(shè)置占位符
</script>
</html>
vue-router 2.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
width: 600px;
height: 60px;
line-height: 60px;
background: #000;
margin: 50px auto;
margin-bottom: 0px;
}
.nav ul {
display: flex;
}
.nav ul li {
flex: 1;
text-align: center;
}
.nav ul li a{
color: #fff;
text-decoration: none;
}
.content{
width: 600px;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="app">
<div class="nav">
<ul>
<!--使用 router-link 組件來導(dǎo)航-->
<!--通過傳入 `to` 屬性指定鏈接-->
<li><router-link to="/home">首頁</router-link></li>
<li><router-link to="/music">音樂</router-link></li>
<li><router-link to="/singer">歌曲</router-link></li>
</ul>
</div>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<div class="content">
<router-view></router-view>
</div>
</div>
<template id="home_tpl">
<div>
<h1>首頁</h1>
<div>
<router-link to="/home/login">登錄</router-link>
<router-link to="/home/regist">注冊(cè)</router-link>
<router-view></router-view>
</div>
</div>
</template>
</body>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//1.定義組件 模版
//const home = {template:'<div>home</div>'};
const home = {template:'#home_tpl'};
const music = {template:'<div>music</div>'};
const singer = {template:'<div>singer</div>'};
const login = {template:'<div>登錄信息</div>'};
const regist = {template:'<div>注冊(cè)信息</div>'};
//2.定義路由
const routes = [
{path:'/home', component: home,
children:[
//注意:在子路由中,不要添加 /
{path:'login', component:login},
{path:'regist', component:regist}
]},
{path:'/music', component: music},
{path:'/singer', component: singer},
//定義根路由指向
{path:'/', redirect:'/home'}
];
//3.創(chuàng)建router實(shí)例, 然后配置 routes
const router = new VueRouter({
routes //縮寫 相當(dāng)于 routes:routes
});
//4.創(chuàng)建和掛載實(shí)例
/* new Vue({
el:'#app'
})*/
const app = new Vue({
router
}).$mount('#app');
</script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
