一、什么是Vue Router
Vue Router的作用就是根據(jù)不同的路徑映射到不同的視圖。
Vue Router（路由）就是SPA（單頁應用）的路徑管理器。SPA(single page application):單一頁面應用程序，只有一個完整的頁面；它在加載頁面時，不會加載整個頁面，而是只更新某個指定的容器中內容。單頁面應用(SPA)的核心之一是: 更新視圖而不重新請求頁面
Vue Router 是 Vue.js 官方的路由管理器，可以用來幫我們解決路由的問題。Vue Router 的能力十分強大，它支持 hash、history、abstract 3 種路由方式，提供了 <router-link>和 <router-view> 2 種組件，還提供了簡單的路由配置和一系列好用的 API。
二、Vue Router基本使用
1. 導入Vue Router
<!--注意: 必須先導入Vue之后再導入Vue Router-->
<script src="js/vue-router.js"></script>
2. 定義路由規(guī)則
// 定義切換的規(guī)則(定義路由規(guī)則)
const routes = [
// 數(shù)組中的每一個對象就是一條規(guī)則
{path: "/one", component: one},
{path: "/two", component: two}
];
重定向路由
{ path: '被重定向值', redirect: '重定向之后的值' }
例如: 我們先一進來就顯示one組件
這里的/是根路徑
// 重定向路由
{path: "/", redirect: '/one'}
3. 根據(jù)路由規(guī)則創(chuàng)建路由對象
const router = new VueRouter({
routes: routes
// 簡寫
routes
});
4. 將路徑對象掛載到Vue實例中
//定義組件
const one = {
template: '#one'
};
const two = {
template: '#two'
};
new Vue({
el: '#app',
// 將創(chuàng)建好的路由對象綁定到Vue實例上
router: router,
components: {
'one': one,
'two': two
}
});
5. 修改URL哈希值
<a href="#/one">切換到第一個頁面</a>
<a href="#/two">切換到第二個頁面</a>
通過a標簽確實能設置URL的hash,但是這種方式并不專業(yè)
在Vue Router中提供了一個專門用于設置hash的標簽 router-link
默認情況下Vue會將router-link渲染成a標簽, 但是我們可以通過tag來指定到底渲染成什么
<router-link to="/one" tag="button">切換到第一個頁面</router-link>
<router-link to="/two" tag="button">切換到第二個頁面</router-link>
給router-link設置選中樣式
默認情況下我們可以通過重寫router-link-active類名來實現(xiàn)設置選中樣式
但是我們也可以通過linkActiveClass來指定選中樣式
const router = new VueRouter({
routes: routes,
linkActiveClass: 'my-active'
});
6. 通過<router-view>渲染匹配的組件
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
三、Vue Router傳遞參數(shù)
將Vue Router掛載到了Vue實例對象上, 我們就可以通過vue.$route拿到路由對象
拿到了路由對象, 就可以通過路由對象拿到傳遞的參數(shù)。
1. 通過URL參數(shù)傳參
在指定Hash的時候, 通過?key=value&key=value的方式傳遞
<router-link to="/one?name=zs&age=20" tag="button">切換到第一個頁面</router-link>
在傳遞的組件的生命周期方法中通過 this.$route.query的方式來獲取
const one = {
template: '#one',
created: function () {
console.log(this.$route); // 路由對象
console.log(this.$route.query.name); // zs
console.log(this.$route.query.age); // 20
}
};
2. 通過占位符傳參
在指定路由規(guī)則的時候通過/:key/:key的方式來指定占位符
const routes = [
{path: "/two/:name/:age", component: two}
];
在指定Hash的時候, 通過/value/value的方式來傳遞值
<router-link to="/two/ls/30" tag="button">切換到第二個頁面</router-link>
在傳遞的組件的生命周期方法中通過 this.$route.params 的方式來獲取
const two = {
template: '#two',
created: function () {
console.log(this.$route); // 路由對象
console.log(this.$route.params.name); // ls
console.log(this.$route.params.age); // 30
}
};
四、 嵌套路由
嵌套路由也稱之為子路由, 就是在被切換的組件中又切換其它子組件
實際生活中的應用界面，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態(tài)路徑也按某種結構對應嵌套的各層組件，例如：
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
借助 vue-router，使用嵌套路由配置，就可以很簡單地表達這種關系。
例如: 如何實現(xiàn)下圖效果
在第一個界面中又有兩個按鈕, 通過這兩個按鈕進一步切換第一個頁面中的內容
1. 對第一個頁面增加兩個子組件
<router-link to="" tag="button">切換到第一個子頁面</router-link>
<router-link to="" tag="button">切換到第二個子頁面</router-link>
<router-view></router-view>
const one = {
template: '#one',
components: {
'onesub1': onesub1,
'onesub2': onesub2
}
};
2. 設置子按鈕哈希值
<!--在這里需要加一級路由地址-->
<router-link to="/one/onesub1" tag="button">切換到第一個子頁面</router-link>
<router-link to="/one/onesub2" tag="button">切換到第二個子頁面</router-link>
3. 定義路由規(guī)則
注意: 子路由是定義到第一級路由中的
{
path: '/one',
component: one,
// 通過children配置子路由
children: [
{
// 注意: 如果是嵌套路由(子路由), 那么不用寫一級路徑的地址, 并且也不用寫/
path: 'onesub1',
component: onesub1
},
{
path: 'onesub2',
component: onesub2
}
]
},
五、命名視圖
命名視圖和具名插槽很像, 都是讓不同的出口顯示不同的內容
命名視圖就是當路由地址被匹配的時候同時指定多個出口, 并且每個出口中顯示的內容不同
也可以用于同時 (同級) 展示多個視圖，而不是嵌套展示
和匿名插槽一樣, 如果指定了多個router-view, 那么當路由地址被匹配之后, 多個router-view中顯示的內容是一樣的
如果 router-view 沒有設置名字，那么默認為 default。
<router-view></router-view>
<router-view></router-view>
const routes = [
{
path: '/',
component: one
}
];
和具名插槽一樣, 如果想同時顯示多個不同的組件, 那么可以給出口指定名稱
- 在路由規(guī)則中給組件起名稱
const routes = [
{
path: '/',
// 確保正確使用 components 配置 (帶上 s)
components: {
name1: one,
name2: two
}
}
];
- 在出口中指定顯示哪個名稱的組件
<router-view name="name1"></router-view>
<router-view name="name2"></router-view>
六、Watch
1. 監(jiān)聽數(shù)據(jù)的變化
Watch屬性是專門用于監(jiān)聽數(shù)據(jù)變化的, 只要數(shù)據(jù)發(fā)生了變化, 就會自動調用對應數(shù)據(jù)的回調方法
<input type="text" v-model="cityName"/>
new Vue({
el: '#root',
data: {
cityName: 'shanghai'
},
watch: {
cityName： function(newName, oldName) {
// ...
}
}
})
2. 監(jiān)聽路由變化
Watch屬性不僅僅能夠監(jiān)聽數(shù)據(jù)的變化, 還能夠監(jiān)聽路由地址的變化，只要路由地址發(fā)生變化, 就會自動調用對應的回調函數(shù)
在開發(fā)中我們可以通過Watch來判斷當前界面是從哪個界面跳轉過來的
'$route.path': function (newValue, oldValue) {
console.log(newValue, oldValue);
}
