在前端開發的生涯中，很有可能會開發SPA（single page appaication）單頁面應用，單頁面應用少不了用到路由，那麼Vue中的路由是怎麼用的呢，下面我們就來探討一下：

一、Vue路由簡介：

用來開發SPA（單頁面應用），根據不同的url地址顯示不同的內容，但顯示在同一個頁面中。

二、基本用法

引用：需要額外的引用vue-router.js外掛

HTML部分

a）.使用內建元件`router-link`元件來定義導航，元件的屬性`to`指定連線到的url；
b）.使用內建元件`router-view`元件來顯示路由內容;例如：

<div class="nav">
            <!-- 使用router-link元件來定義導航，to屬性指定連線到的url -->
            <router-link to="/home">主頁</router-link>
            <router-link to="/news">新聞</router-link>
            <!-- 最後被渲染成a標籤 -->
        </div>
        <div class="content">
            <!-- 使用router-view來顯示路由內容 -->
            <router-view></router-view>
        </div>
 

JS部分

a）.定義路由對應的內容元件
b）.配置路由
c）.建立路由的例項
d）.建立Vue例項,並將建立的路由例項掛載到Vue例項上（注入路由），例如：

第一步：定義路由對應的內容元件

var home = {//路由元件
    template:"<h3>我是主頁內容</h3>"
}
var news = {//同上
    template: "<h3>我是新聞內容</h3>"
}

var routes = [//是陣列，其中的每一項都代表一個路由
    {path:"/home",component:home},//component表示對應的內容元件指向哪個元件
    {path: "/news", component: news },
    {path: "*", redirect:"/home"},//路由的重定向,當找不到匹配的路由時預設定向到home元件
]
 

var router = new VueRouter({
    routes:routes,//必須
    mode:"history",//修改路由的模式，預設是hash，可以是history，abstract
    linkActiveClass:"active",//修改活動連結的class類名
    // 還有其他的配置項...
})

var app = new Vue({
    el:"#container",
    router:router,//注入路由
    data:{
        greeting:"hello,world!",
        task:{
            content:"完成資料分發工作",
            timeLine:"2018-3-20",
            joiner:"張三"
        }
    }
})