Vue Router 是Vue官方的路由管理器，是Vue用來實現SPA的插件。它和 Vue.js 的核心深度集成，讓構建單頁面應用(SPA)變得易如反掌。vue

基本概念：

路由：是一種映射關係，是「path =>組件」的映射ajax

路由器：管理路由的，在路由器裏配置路由vue-router

一、npm 安裝

npm install vue-routernpm

二、相關API說明

（1）路由配置：route是一條路由的實現, 它是一個對象，由兩個部分組成： path和component. 或path和redirect。 path 指路徑，component 指的是組件。多個route組成一個routes。app

routes:[ {//通常路由
 path:'/about', component:About //組件
 }, {//自動跳轉路由
 path:'/', redirect:'/about' } ]

（2）VueRouter()：用於建立路由器的構造函數，接受routes參數函數

new Router({ //多個配置項

routes // routes: routes 的簡寫

})

（3）註冊路由器：把router 實例注入到 vue 根實例中this

import router from "./router"; //先引入路由

new Vue({
router,
...
})

（4）使用路由組件標籤spa

①<router-link>：用來生成路由連接插件

<router-link to="./xxx">go to xxx</router-link>3d

②<router-view>：用來顯示當前路由組件界面，匹配了哪一個組件就會顯示哪一個組件的界面

<router-view></router-view>

執行過程：當用戶點擊 router-link 標籤時，會去尋找它的 to 屬性，它的 to 屬性和router/index.js 中配置的路徑{ path: '/home', component: Home} path 一一對應，從而找到了匹配的組件，最後把組件渲染到 <router-view> 標籤所在的地方。全部的這些實現是基於hash 實現的。

三、簡單使用

一：基本路由

基本目錄結構：

注意：組件包括兩種，路由組件和非路由組件，非路由組件放在components文件夾中，路由組件放在另外一個文件夾中，一般命名爲views或者pages

（1）定義路由器模塊 router/index.js

/* 路由器模塊 */ import Vue from 'vue' import VueRouter from 'vue-router'
//引入路由組件
import About from '../views/About.vue' import Home from '../views/Home.vue' Vue.use(VueRouter) export default new VueRouter({//向外暴露一個路由器
    //n個路由
 routes:[ { path:'/about', component:About }, { path:'/home', component:Home }, {//當請求根路徑時，重定向請求home
            path:'/', redirect:'/home' } ] })

（2）在入口的main.js中引入路由器，並進行配置

import Vue from 'vue' import App from './App' import router from './router' //index能夠省略不寫，引入路由器



new Vue({//配置對象的屬性名都是一些默認的屬性名，不能隨便修改
    el:'#app', components:{ App }, template:'<App/>', router })

（3）App.vue中使用路由組件標籤 <router-link>和<router-view>

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-offset-2 cool-xs-8">
                <div class="page-header"><h2>Router Basic - 01 </h2></div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-2 col-xs-offset-2">
                <div class="list-group">
                    <router-link to="/home" class="list-group-item">Home</router-link> <router-link to="/about" class="list-group-item">About</router-link>                   
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-body">
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script> export default{ } </script>

<style> .container{ width:1000px; margin:0 auto;
    } .router-link-active{ color:red !important;
    }
</style>

（4）編輯路由組件的內容

Home.vue

<template>
    <div> Home </div>
</template>

<script> export default{ } </script>

<style>

</style>

About.vue

<template>
    <div> About </div>
</template>

<script> export default{ } </script>

<style>

</style>

最終呈現結果：

二：嵌套路由：點擊一個路由以後，打開的頁面中仍然存在路由

效果圖：

（1）修改路由器模塊（ router/index.js）中的routes配置

/* 路由器模塊 */ import Vue from 'vue' import VueRouter from 'vue-router'
//引入路由組件
import About from '../views/About.vue' import Home from '../views/Home.vue' import Message from '../views/Message.vue' import News from '../views/News.vue' Vue.use(VueRouter) export default new VueRouter({//向外暴露一個路由器
    //n個路由
 routes:[ { path:'/about', component:About }, { path:'/home', component:Home, children:[ { path:'/home/message', //path最左側的斜槓永遠表明根路徑  component:Message }, { path:'/home/news', component:News }, { path:'/home', redirect:'/home/news' } ] }, {//當請求根路徑時，重定向請求home
            path:'/', redirect:'/home' } ] })

（2）Home組件中，使用路由組件標籤 <router-link>和<router-view>

<template>
    <div style="margin-left:10px;">
        <h2>Home 組件</h2>
        <div>
            <ul class="nav nav-tabs">
                <li><router-link to="/home/news">News</router-link></li>
                <li><router-link to="/home/message">Message</router-link></li>
            </ul>
            <div>
                <router-view></router-view>
                <hr>
            </div>

        </div>
    </div>
</template>

<script> export default{ } </script>

<style>

</style>

（3）編輯新增的News和Message路由組件的內容

News.vue

<template>
    <div>
        <ul>
            <li v-for="(news,index) in newsArr" :key="index"> {{news}} </li>           
        </ul>

    </div>
</template>

<script> export default{ data(){ return { newsArr:['news1','news2','news3'] } } } </script>

<style>

</style>

Message.vue

<template>
    
    <ul>
        <li v-for="(message,index) in messages" :key="message.id">
            <a href="">{{message.title}}</a>
        </li>
    </ul>
    
</template>

<script> export default{ data(){ return { messages:[] } }, mounted(){ var that = this; //模擬ajax請求從後臺請求數據
 setTimeout(()=>{ const messages = [ {id:1,title:'message1'}, {id:2,title:'message2'} ] that.messages = messages; },1000) } } </script>

<style>

</style>

Vue Router的入門以及簡單使用