一、路由的模式

　　第一種用history方式實現，HTML5使用window.history.pushState()實現路由的切換而不刷新頁面。

　　第二種使用hash值的方式來實現。

　　vue2.0兩種都可以使用只需要在配置路由時加上

　　mode:‘history/mode‘ vue2.0默認為hash模式。需要切換為history模式時使用

　　const router = new VueRouter({
　　// mode:‘history‘,
　　routes:routes
　　})

　　兩種模式的區別：

　　hash:支持所有瀏覽器，包括不支持HTML5的瀏覽器。

　　history:依賴html5 history API

二、一般配置路由：

　　<div>
　　　　<router-link to="/home">主頁</router-link>
　　　　<router-link to="/news">新聞</router-link>
　　</div>
　　<div>
　　　　<router-view></router-view>
　　</div>

　　//準備組件
　　var Home={
　　template:‘<h3>我是主頁</h3>‘
　　};
　　const News={
　　template:‘<h3>我是新聞</h3>‘
　　};
　　//配置路由
　　const routes=[
　　{path:‘/home‘,component:Home},
　　{path:‘/news‘,component:News},
　　{path:‘*‘,redirect:‘/home‘}
　　];
　　//生成路由實例
　　const router = new VueRouter({
　　routes:routes
　　});
　　//最後掛載
　　new Vue({
　　router:router,
　　el:‘#box‘
　　})

這樣有一個缺點：如果修改路由配置的路徑時每一個router-link都需要改變，所以有如下優化方法：

　　html中：

　　　　<router-link :to="{name:‘Home‘}"> //有冒號，傳入的為一個對象

　　JS中:

　　　　配置路由時使用

　　　　　　routes:[

　　　　　　　　{name:‘Home‘,path:‘/‘,component:Home},

　　　　　　]

　　　　需要改變路徑時只需要改變配置時的路徑即可。

三、路由使用tag標簽

　　例如有些時候在ul中必須嵌套li要設置路由的話必須在li中再嵌套<router-link>

　　eg:

　　<ul>

　　　　　　<li><router-link></router-link></li>　　

　　　　</ul>

　　使用tag標簽時即可優化：

　　　　<ul>

　　　　　　<router-link tag="li"></router-link>

　　　　</ul>

四、動態路由

　　eg:

　　<router-link :to="{name:‘BookDetails‘,params:{id:1}}"></router-link>　　　

　　在JS中使用

　　const bookID = this.$router.params.id調用即可　

vue2.0路由進階