路由中有三個基本的概念 route, routes, router。
1. route: 是一條路由汉嗽，它是單數(shù)蜈膨， Home按鈕 => home內(nèi)容鳞芙， 這是一條route, about按鈕 => about 內(nèi)容， 這是另一條路由卫玖。
2. routes: 是一組路由公你，把上面的每一條路由組合起來，形成一個數(shù)組假瞬。[{home 按鈕 =>home內(nèi)容 }陕靠， { about按鈕 => about 內(nèi)容}]
3. router: 是一個機(jī)制，相當(dāng)于一個管理者脱茉，它來管理路由懦傍。因為routes 只是定義了一組路由，它放在哪里是靜止的芦劣，當(dāng)真正來了請求粗俱，怎么辦？ 就是當(dāng)用戶點擊home 按鈕的時候虚吟，怎么辦寸认？這時router 就起作用了，它到routes 中去查找串慰，去找到對應(yīng)的 home 內(nèi)容偏塞，所以頁面中就顯示了 home 內(nèi)容。
vue-router 中的路由也是基于上面的三個基本概念來實現(xiàn)的邦鲫，我們只要把路徑和組件對應(yīng)起來灸叼，然后在頁面中把組件渲染出來
1.頁面實現(xiàn)
在vue-router中有兩個標(biāo)簽 <router-link> 和 <router-view> 分別對應(yīng)點擊和顯示部分。
<router-link>點擊哪里 <router-view>顯示哪里庆捺，<router-link>有個屬性 to 就是說點擊后去哪里 比如： <router-link to = "/login">login</router-link>
2.js中配置
定義route古今，是一個對象有兩部分組成：path 和 component 。path指路徑滔以，component指組件捉腥。比如：
{ path: '/home', component: login }
兩條路由就組成一個routes：
const routes = [
{ path: '/home', component: home },
{ path: '/about', component: about }
]
最后創(chuàng)建router對路由進(jìn)行管理，由構(gòu)造函數(shù)new vueRouter()創(chuàng)建你画，接受routes參數(shù)抵碟。
const router = new vueRouter({
routes: [
{ path: '/home', component: home },
{ path: '/about', component: about }
]
})
配置完成后桃漾，把router注入到vue根實例中（main.js）
new Vue({
router
})
現(xiàn)在使用一下
1.建立home.vue 和 about.vue
// home.vue
<template>
<div>
<h1>home</h1>
<p>{{homeMsg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
homeMsg: '我是home組件'
}
}
}
</script>
// about.vue
<template>
<div>
<h1>about</h1>
<p>{{aboutMsg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
aboutMsg: '我是about組件'
}
}
}
</script>
2.在App.vue中 定義 <router-link > 和 </router-view>
<template>
<div id="app">
<!-- router-link 定義點擊后導(dǎo)航到哪個路徑下 -->
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<!-- 對應(yīng)的組件內(nèi)容渲染到router-view中 -->
<router-view></router-view>
</div>
</template>
3.在router下的index.js中定義router
import Vue from 'vue'
import Router from 'vue-router'
import home from '../home.vue';
import about from "../about.vue";
Vue.use(Router)
export default new Router({
routes: [
{
path: "/home",
name: "home",
component: home,
},
{
path: "/about",
name: "about",
component: about
}
]
})
這時候有個問題，當(dāng)進(jìn)入頁面時沒有任何內(nèi)容拟逮，點擊后才有內(nèi)容撬统。因為首次進(jìn)入頁面，它的路徑是"/"敦迄，沒有給這個路徑做相應(yīng)的配置恋追。所以要用到重定向。所謂重定向颅崩，就是重新給它指定一個方向几于。
// 重定向
{
path: '/',
redirect: '/home'
}
/* 選中的樣式 */
a.router-link-active {
color: red;
}
/* 未選中的樣式 */
.gray {
color: gray
}
<router-link class="gray" to="/home">Home</router-link>
