對(duì)于前端來(lái)說(shuō)凹嘲，其實(shí)瀏覽器配合超級(jí)連接就很好的實(shí)現(xiàn)了路由功能。但是對(duì)于單頁(yè)面應(yīng)用來(lái)說(shuō)，瀏覽器和超級(jí)連接的跳轉(zhuǎn)方式已經(jīng)不能適用浸颓， 所以各大框架紛紛給出了單頁(yè)面應(yīng)用的解決路由跳轉(zhuǎn)的方案。
Vue框架的兼容性非常好壮啊，可以很好的跟其他第三方的路由框架進(jìn)行結(jié)合嫉鲸。當(dāng)然官方也給出了路由的方案：
vue-router; 建議還是用官方的最好，使用量也是最大歹啼，相對(duì)來(lái)說(shuō)Vue框架的升級(jí)路由組件升級(jí)也會(huì)及時(shí)跟上玄渗，所以為了以后的維護(hù)和升級(jí)方便還是使用Vue自家的東西最好。
7.1. Vue-router的版本對(duì)應(yīng)
注意: vue-router@2.x 只適用于 Vue 2.x 版本狸眼。 vue-router@1.x 對(duì)應(yīng)于Vue1.x版本藤树。
- 的Github地址：vue-router
- 文檔地址
7.2. vue-router的安裝使用
- CDN連接方式
https://unpkg.com/vue-router/dist/vue-router.js
- npm 安裝
npm install vue-router
7.3. vue-router 入門demo
vue-router開發(fā)的步驟：
-
第一步： 引入vue和vue-router包。
可以使用cdn的方式或者npm的方式拓萌。如果配合npm和webpack的話可以直接作為一個(gè)模塊導(dǎo)入即可岁钓。但是作為初學(xué)入門的話建議還是 直接使用cdn包的形式，先學(xué)會(huì)怎么用路由。
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
-
第二步： 定義路由跳轉(zhuǎn)的組件
// 1\. 定義（路由）組件屡限。 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } 第三步： 定義路由規(guī)則對(duì)象
// 每個(gè)路由path應(yīng)該映射一個(gè)組件品嚣。 其中"component" 可以是
// 通過(guò) Vue.extend() 創(chuàng)建的組件構(gòu)造器，
// 或者钧大，只是一個(gè)組件配置對(duì)象翰撑。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 創(chuàng)建路由對(duì)象
const router = new VueRouter({
routes // （縮寫）相當(dāng)于 routes: routes，es6的新語(yǔ)法
})
- 第四步： 創(chuàng)建Vue對(duì)象啊央，并加重上面創(chuàng)建的路由對(duì)象
// 記得要通過(guò) router 配置參數(shù)注入路由眶诈，
// 從而讓整個(gè)應(yīng)用都有路由功能
const app = new Vue({
router
}).$mount('#app')
- 第五步： 在模板中編寫路由跳轉(zhuǎn)鏈接
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 組件來(lái)導(dǎo)航. -->
<!-- 通過(guò)傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
最終的代碼：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 組件來(lái)導(dǎo)航. -->
<!-- 通過(guò)傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
<script>
// 1\. 定義（路由）組件。
// 可以從其他文件 import 進(jìn)來(lái)
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2\. 定義路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3\. 創(chuàng)建 router 實(shí)例瓜饥，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過(guò)先這么簡(jiǎn)單著吧逝撬。
const router = new VueRouter({
routes // （縮寫）相當(dāng)于 routes: routes
})
// 4\. 創(chuàng)建和掛載根實(shí)例。
// 記得要通過(guò) router 配置參數(shù)注入路由压固，
// 從而讓整個(gè)應(yīng)用都有路由功能
const app = new Vue({
router
}).$mount('#app')
</script>
7.4. 使用vue-router的綜合實(shí)例
下面是一個(gè)綜合的例子, 頁(yè)面上有幾個(gè)導(dǎo)航的按鈕球拦，然后通過(guò)點(diǎn)擊不同的按鈕，可以在當(dāng)前頁(yè)面切換不同的組件帐我。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之extend全局方法</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
ul, li { list-style: none; }
ul { overflow: hidden; }
li { float: left; width: 100px; }
h2 { background-color: #903;}
</style>
</head>
<body>
<div id="app">
<top-bar> </top-bar>
<hr>
<p>email to: {{ email }}</p>
<hr>
<router-view class="view one"></router-view>
<footer-bar></footer-bar>
</div>
<script>
var topbarTemp = `
<nav>
<ul>
<li v-for="item in NavList">
<router-link :to="item.url">{{ item.name }}</router-link>
</li>
</ul>
</nav>
`;
// 定義組件：topbar
Vue.component('top-bar', {
template: topbarTemp,
data: function () {
return {
NavList: [
{ name: '首頁(yè)', url: '/home'},
{ name: '產(chǎn)品', url: '/product'},
{ name: '服務(wù)', url: '/service'},
{ name: '關(guān)于', url: '/about'}
]
}
}
});
Vue.component('footer-bar', { // 定義組件 footerbar
template: `
<footer>
<hr/>
<p>版權(quán)所有@flydragon<p>
</footer>
`
});
// 創(chuàng)建home模塊
var home = {
template: `<div> <h2>{{ msg }}<h2></div>`,
data: function () {
return { msg: 'this is home view' }
}
};
// 創(chuàng)建product 模塊
var product = {
template: `<div> {{ msg }}</div>`,
data: function () {
return { msg: 'this is product view' }
}
}
// 定義路由對(duì)象
var router = new VueRouter({
routes: [
{ path: '/home', component: home },
{ path: '/product', component: product }
]
});
// 初始化一個(gè)Vue實(shí)例
var app = new Vue({
el: '#app',
data: {
email: 'flydragon@gmail.com'
},
router: router
});
</script>
</body>
</html>
7.5. 路由參數(shù)獲取
定義路由路徑的時(shí)候坎炼，可以指定參數(shù)。參數(shù)需要通過(guò)路徑進(jìn)行標(biāo)識(shí)：/user/:id就是定義了一個(gè)規(guī)則拦键，/user開頭谣光，然后后面的就是id參數(shù)的值。 比如：
路由規(guī)則： /user/:id
/user/9 => id = 9
/user/8 => id = 8
/user/1 => id = 1
然后在跳轉(zhuǎn)后的vue中可以通過(guò)this.$route.params.參數(shù)名獲取對(duì)應(yīng)的參數(shù)芬为。 比如代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之extend全局方法</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<nav>
<router-link to="/user/9">用戶</router-link>
<router-link to="/stu/malun">學(xué)生</router-link>
<hr>
</nav>
<router-view></router-view>
</div>
<script>
var user = {
template: `
<div>user id is : {{ $route.params.id }}</div>
`
};
var stu = {
template: `
<div>
<h2>{{ getName }}</h2>
</div>
`,
computed: {
getName: function () {
return this.$route.params.name;
}
}
};
var router = new VueRouter({
routes: [
{ path: '/user/:id', component: user },
{ path: '/stu/:name', component: stu }
]
});
var app = new Vue({
el: '#app',
router: router
});
</script>
</body>
</html>
7.6. js控制路由跳轉(zhuǎn)
上面我們演示的都是通過(guò)router-link進(jìn)行跳轉(zhuǎn)萄金。 其實(shí)我們還可以通過(guò)js編程的方式進(jìn)行路由的跳轉(zhuǎn)。
// 當(dāng)前路由的view跳轉(zhuǎn)到 /home
router.push('home')
// 對(duì)象, 跳轉(zhuǎn)到/home
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數(shù)媚朦，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
7.7. 嵌套路由
嵌套路由跟普通路由基本沒(méi)有什么區(qū)別氧敢。但是可以讓vue開發(fā)變的非常靈活。 官網(wǎng)這塊寫的也非常好询张，我就直接拷貝了（原諒我吧孙乖。） 實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成份氧。同樣地唯袄，URL 中各段動(dòng)態(tài)路徑也按某種結(jié)構(gòu)對(duì)應(yīng)嵌套的各層組件，例如：
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
借助 vue-router蜗帜，使用嵌套路由配置恋拷，就可以很簡(jiǎn)單地表達(dá)這種關(guān)系。
<div id="app">
<router-view></router-view>
</div>
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
這里的 <router-view> 是最頂層的出口厅缺，渲染最高級(jí)路由匹配到的組件胞谭。同樣地，一個(gè)被渲染組件同樣可以包含自己的嵌套 <router-view>伴挚。例如，在 User 組件的模板添加一個(gè) <router-view>：
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
要在嵌套的出口中渲染組件酪我，需要在 VueRouter 的參數(shù)中使用 children 配置：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 當(dāng) /user/:id/profile 匹配成功，
// UserProfile 會(huì)被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 當(dāng) /user/:id/posts 匹配成功
// UserPosts 會(huì)被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
要注意且叁，以 / 開頭的嵌套路徑會(huì)被當(dāng)作根路徑都哭。 這讓你充分的使用嵌套組件而無(wú)須設(shè)置嵌套的路徑。 你會(huì)發(fā)現(xiàn)逞带，children 配置就是像 routes 配置一樣的路由配置數(shù)組欺矫，所以呢，你可以嵌套多層路由展氓。
此時(shí)穆趴，基于上面的配置，當(dāng)你訪問(wèn) /user/foo 時(shí)遇汞，User 的出口是不會(huì)渲染任何東西未妹，這是因?yàn)闆](méi)有匹配到合適的子路由。如果你想要渲染點(diǎn)什么空入，可以提供一個(gè) 空的 子路由：
const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// 當(dāng) /user/:id 匹配成功络它，
// UserHome 會(huì)被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
// ...其他子路由
]
}
]
})
聯(lián)系老馬
對(duì)應(yīng)視頻地址：http://qtxh.ke.qq.com
老馬qq： 515154084
老馬微信：請(qǐng)掃碼
