Vue-router
前端路由和後端路由的概念
前端路由：對於單頁面應用程序來說，主要通過url中的hash（#號）來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容，所以單頁面程序中的頁面跳轉主要用hash實現。
後端路由：對於普通的網站，所以得超鏈接都是url地址，所有的url地址都對應服務器上對應的資源。
在vue中使用vue-router步驟
1、導入vue-router組件類庫
<script src="./lib/vue-router-3.0.1.js"></script>
2、創建一個路由對象，當導入vue-router包之後，在window全局對象中，就有了一個路由的構造函數，叫做VueRouter。
routes：表示路由匹配規則，每個路由匹配規則都是一個對象，這個規則對象身上必須有兩個屬性。
屬性1是path，表示監聽哪個路由鏈接地址
屬性2是component，表示如果路由是前面匹配到的path，則展示component屬性對應的那個組件（注意：component的屬性值，必須是一個組件的模板對象，不能是組件的引用名稱）
var routerObj = new VueRouter({
routes : [
{path: '/login', component: login},
{path: '/register', component: register}
],
})
3、創建組件模板對象
var login = {
template: '<h1>登錄組件</h1>'
}
var register = {
template: '<h1>註冊組件</h1>'
}
4、將路由規則對象，註冊到vm實例上，router指向routerObj，用來監聽url地址的變化，然後展示相應的組件
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router: routerObj //將路由規則對象，註冊到vm實例上，用來監聽url地址的變化，然後展示相應的組件
});
5、使用router-view組件來顯示匹配到的組件,這是vue-router提供的元素，專門用來當做佔位符的，將來路由規則匹配到的組件，就會展示到這個router-view中去,所以可以認爲router-view是一個佔位符
<div id="app">
<router-view></router-view>
</div>
6、使用router-link組件來導航
不使用router-link導航方式：
<a href="#/login">登錄</a>
<a href="#/register">註冊</a>
使用router-link導航方式，router-link默認渲染爲一個a標籤：
<router-link to="/login" tag="span">登錄</router-link>
<router-link to="/register">註冊</router-link>
7、當首次進入該頁面時，默認login頁面，使用redirect重定向修改根目錄的hash值
{path: '/', redirect: '/login'},
8、設置選中組件高亮的方式
方式1：
<style>
.router-link-active, .myactive{
color: red;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
background-color: green;
}
</style>
方式2：通過路由構造選項linkActiveClass
linkActiveClass: 'myactive'
運行結果：
在路由規則中定義參數
方式1：使用query方式傳遞參數。通過this.$route.query.id獲取url地址中的id
<body>
<div id="app">
<!-- 如果在路由中，使用查詢字符串，給路由傳遞參數，則不需要修改路由規則的path屬性 -->
<router-link to="/login?id=10&name=zs">登錄</router-link>
<router-link to="/register">註冊</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h1>登錄 --- {{ $route.query.id}} --- {{ $route.query.name }}</h1>',
created(){ //組件的生命週期鉤子函數
console.log(this.$route.query.id)
}
}
var register = {
template: '<h1>註冊</h1>'
}
var router = new VueRouter({
routes: [
{path: '/login', component: login},
{path: '/register', component: register}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router
});
</script>
</body>
方式2：使用params方式傳遞參數。通過this.$route.params.id獲取url地址中的id
運行結果：
路由嵌套
使用children屬性實現路由嵌套。
嵌套路由就是在一個路由頁面下繼續使用路由，也就是路由中的路由。
進出根目錄#/出現Account；
進入路徑#/account出現<h1>文本和<a>登錄和註冊鏈接
進入路徑#/account/login，這是二級路由，account下的東西不變，點擊登錄出現<h3>的文本，這裏採用的是children屬性，實現子路由
注意：子路由的path前面，不要帶/，否則永遠以根路徑開始請求
<body>
<div id="app">
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div>
<template id="tmp1">
<div>
<h1>這是Account組件</h1>
<router-link to="/account/login">登錄</router-link>
<router-link to="/account/register">註冊</router-link>
<router-view></router-view>
</div>
</template>
<script>
// 組件的模板對象
var account = {
template: '#tmp1'
}
var login = {
template: '<h3>登錄</h3>'
}
var register = {
template: '<h3>註冊</h3>'
}
var router = new VueRouter({
routes: [
{path: '/account',
component: account,
// 使用children屬性，實現子路由，同時子路由的path前面，不要帶/，否則永遠以根路徑開始請求，這樣不方便用戶去理解url地址
children:[
{path: 'login', component: login},
{path: 'register', component: register}
]},
// {path: '/account/login', component: login},
// {path: '/account/register', component: register}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router
});
</script>
</body>