一：定義：

是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。

二:基本用法

實現頁面的兩個頁面的來回跳轉

<div id="app">
    <div>
        <router-link to="/">首頁</router-link>
        <router-link to="
 
/index">為業</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>


</div>

<script src="../es6/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<script src="../js/app.js"
 
></script>

var routes=[
    {
        path:‘/‘,
        component:{
            template:`
            <div>
            <h1>首頁</h1>
</div>
            `
        }
    },

    {
      path:‘/index‘,
      component:{
          template:`
          <div>
          <h1>第二頁</h1>
</div>
          
          `
      }
    }
]

 
var router=new VueRouter({
    routes:routes
})

new Vue({
    el:‘#app‘,
    router:router
})

三：傳參數：

      <router-link to="/user/王華">王華</router-link>
        <router-link to="/user/huahua">huahua</router-link>

{
      path:‘/user/:name‘,  # 這裏用/：分割開要穿的參數
      component:{
          template:`
          <div>
          <h1>我叫：{{$route.params.name}}</h1>  #{{$route.params}}是固定格式後面.name跟的是路徑後面的參數
</div>  
          `
      }
    }

還有一種的根據路徑？後面加參數傳參。自己了解。

四：子路由,推薦第二種

var routes=[
    {
        path:‘/user/:name‘,
        component:{
            template:`
            <div>
            <h1>首頁</h1>
<router-link>{{$route.params.name}}<router-link>  #顯示傳參信息
<router-link :to=" ‘/user/‘ +$route.params.name  +‘more‘ "></router-link>
<router-view></router-view>   
#這裏需要拼接路由，把子路由拼接到全部路由上。
</div>
            `
        }
        children:{
          path:‘more‘,
          component:{
           template:`
<div>
<h1>更多信息</h1>
</div>
`
}

}
   
    },

<router-link to="more" append>更多信息</router-link>
在後面加一個append就可以

PS：第一種要在to前面加上 ：，第二種則不需要

五：綁定點擊事件，執行路徑的方法

<input type="button" value="按鈕" @click="surf"> 

#綁定點擊時間

new Vue({
    el:‘#app‘,
    router:router,
    methods:{
        surf:function() {
            setTimeout(function () {
                this.router.push(‘/‘),      #把該路徑的方法傳到router裏去
                    setTimeout(function () {
                        this.router.push(‘/user/huahua‘)   #再次把路徑方法傳到裏面去
                    })
            }, 2000)
        }
    }
})

六：命名多個<router-view>

    <router-link to="/lit">first</router-link>
        <router-link to="/lat">second</router-link>

 <div>
        <router-view name="first"></router-view>
        <router-view name="second"></router-view>
    </div>

var res=[
    {
        path:‘/lit‘,
        component:{
            first:{                             #這裏指定用哪個routes-view
                template:`
                <div>
                <h1>first</h1>
</div>
                
                `
            }
        }
    },
    {
        path:‘/lat‘,
        compenent:{
            second:{                                  #這裏用second的routes-view
                template:`
                <h1>second</h1>
                `
            }
        }
    }
]

Vue-router VUE路由系統