Vue-初步了解vue-router的三要素：路由map 、路由視圖、路由導航

安裝vue-router模塊

　　使用vue-router前要先安裝vue-router庫

cnpm install vue-router –save

使用vue-router

　　vue-router有三個要素：路由map  路由視圖 路由導航。路由map指路由與組件的映射關系；路由視圖指路由映射對應組件的渲染位置；路由導航指可以使地址欄發生變化的導航鏈接。
一、路由map

import Vue from 'vue'
import App from './App'
//1、在入口文件main.js里引入
import VRouter from 'vue-router'
Vue.config.productionTip = false
//2、用全局方法use()來注冊使用vue-router
Vue.use(VRouter);
//4、實例化全局router  
let router=new VRouter({
   //以下是路由map
    routes:[
        {
            path:'/apple',
            component:Apple
        },
        {
            path:'/banana',
            component:Banana
        }
    ]
});
new Vue({
  el: '#app',
  router,
  //3、注冊組件
  components: { App,VRouter},
  template: '<App/>'
})

二、路由視圖

<router-view></router-view>

三、路由導航
方法1：使用<router-link> 創建 a 標簽來定義導航鏈接

<router-link :to="{path:'apple'}"> to apple</router-link>
<router-link :to="{path:'banana'}">to apple</router-link>

方法2：使用 router.push 方法

router.push({ path: 'apple' })

點擊 <router-link :to="..."> 等同於調用 router.push(...)。

 

更詳細的關於 <router-link :to="...">和 router.push(...)的知識總結在 Vue-詳解設置路由導航的兩種方法：<router-link :to="..."> 和router.push(...)