路由 router-view

路由，其實就是指向的意思，當我點選頁面上的home按鈕時，頁面中就要顯示home的内容，如果點選頁面上的about 按鈕，頁面中就要顯示about 的内容。Home按鈕 => home 内容， about按鈕 => about 内容，也可以說是一種映射. 是以在頁面上有兩個部分，一個是點選部分，一個是點選之後，顯示内容的部分。

點選之後，怎麼做到正确的對應，比如，我點選home 按鈕，頁面中怎麼就正好能顯示home的内容。這就要在js 檔案中配置路由。

路由中有三個基本的概念 route, routes, router。

1， route，它是一條路由，由這個英文單詞也可以看出來，它是單數， Home按鈕 => home内容， 這是一條route, about按鈕 => about 内容， 這是另一條路由。

2， routes 是一組路由，把上面的每一條路由組合起來，形成一個數組。[{home 按鈕 =>home内容 }， { about按鈕 => about 内容}]

3， router 是一個機制，相當于一個管理者，它來管理路由。因為routes 隻是定義了一組路由，它放在哪裡是靜止的，當真正來了請求，怎麼辦？ 就是當使用者點選home 按鈕的時候，怎麼辦？這時router 就起作用了，它到routes 中去查找，去找到對應的 home 内容，是以頁面中就顯示了 home 内容。

4，用戶端中的路由，實際上就是dom 元素的顯示和隐藏。當頁面中顯示home 内容的時候，about 中的内容全部隐藏，反之也是一樣。用戶端路由有兩種實作方式：基于hash 和基于html5 history api.

vue-router中的路由也是基于上面的内容來實作的

在vue中實作路由還是相對簡單的。因為我們頁面中所有内容都是元件化的，我們隻要把路徑群組件對應起來就可以了，然後在頁面中把元件渲染出來。

1， 頁面實作（html模版中）

在vue-router中, 我們看到它定義了兩個标簽<router-link> 和<router-view>來對應點選和顯示部分。<router-link> 就是定義頁面中點選的部分，<router-view> 定義顯示部分，就是點選後，區配的内容顯示在什麼地方。是以 <router-link> 還有一個非常重要的屬性 to，定義點選之後，要到哪裡去， 如：<router-link to="/home">Home</router-link>

2， js 中配置路由

首先要定義route, 一條路由的實作。它是一個對象，由兩個部分組成： path和component. path 指路徑，component 指的是元件。如：{path:’/home’, component: home}

我們這裡有兩條路由，組成一個routes:

const routes = [

{ path: '/home', component: Home },

{ path: '/about', component: About }

]

最後建立router 對路由進行管理，它是由構造函數 new vueRouter() 建立，接受routes 參數。

const router = new VueRouter({

routes // routes: routes 的簡寫

})

配置完成後，把router 執行個體注入到 vue 根執行個體中,就可以使用路由了

const app = new Vue({

router

}).$mount('#app')

執行過程：當使用者點選 router-link 标簽時，會去尋找它的 to 屬性， 它的 to 屬性和 js

中配置的路徑{ path: '/home', component: Home} path 一一對應，進而找到了比對的元件， 最後把元件渲染到

<router-view> 标簽所在的地方。所有的這些實作才是基于hash 實作的。

vue-cli 建立一個項目體驗一下, 當然不要忘記安裝vue-router

1, 在src 目錄下建立兩個元件，home.vue 和 about.vue

<template>

<div>

<h1>home</h1>

<p>{{msg}}</p>

</div>

</template>

<script>

export default {

data () {

return {

msg: "我是home 元件"

}

</script>

<h1>about</h1>

<p>{{aboutMsg}}</p>

aboutMsg: '我是about元件'

2, 在 App.vue中 定義<router-link > 和 </router-view>

<div id="app">

<img src="./assets/logo.png">

<header>

<!-- router-link 定義點選後導航到哪個路徑下 -->

<router-link to="/home">Home</router-link>

<router-link to="/about">About</router-link>

</header>

<!-- 對應的元件内容渲染到router-view中 -->

<router-view></router-view>

3, 在 src目錄下再建立一個router.js 定義router, 就是定義 路徑到 元件的 映射。

import Vue from "vue";

import VueRouter from "vue-router";

// 引入元件

import home from "./home.vue";

import about from "./about.vue";

// 要告訴 vue 使用 vueRouter

Vue.use(VueRouter);

{

path:"/home",

component: home

},

path: "/about",

component: about

var router = new VueRouter({

routes

export default router;

4， 把路由注入到根執行個體中，啟動路由。這裡其實還有一種方法，就像vuex store 注入到根執行個體中一樣，我們也可以把vueRouter 直接注入到根執行個體中。在main.js中引入路由，注入到根執行個體中。

import Vue from 'vue'

import App from './App.vue'

// 引入路由

import router from "./router.js"

new Vue({

el: '#app',

router, // 注入到根執行個體中

render: h => h(App)

5， 這時點選頁面上的home 和about 可以看到元件來回切換。但是有一個問題，當首次進入頁面的時候，頁面中并沒有顯示任何内容。這是因為首次進入頁面時，它的路徑是 '/'，我們并沒有給這個路徑做相應的配置。一般，頁面一加載進來都會顯示home頁面，我們也要把這個路徑指向home元件。但是如果我們寫{ path: '/', component: Home },vue 會報錯，因為兩條路徑卻指向同一個方向。這怎麼辦？這需要重定向，所謂重定向，就是重新給它指定一個方向，它本來是通路 / 路徑，我們重新指向‘/home’, 它就相當于通路 '/home', 相應地, home元件就會顯示到頁面上。vueRouter中用 redirect 來定義重定向。