1.vue-router:

vue的路由工具

先需要安裝：通過npm安裝在程式入口檔案main.js中引入

main.js:

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

這樣就完成了vue-router的基本安裝工作了

在App.vue同一級目錄下建立這四個vue檔案

接下來就是在main.js檔案中定義路由的匹配規則了。VueRouter的定義非常簡單易懂，只需要建立一個VueRouter例項，將路由path指定到一個元件型別上就可以了：

main.js:

import Vue from 'vue'

import VueRouter from 'vue-router'

import App from './App.vue'

//引入建立的四個頁面

import Home from './Home.vue'

import Explorer from './Explorer.vue'

import Cart from './Cart.vue'

import Me from './Me.vue'

//使用路由例項外掛

Vue.use(VueRouter)

const router = new VueRouter({

    mode:'history',

    base:__dirname,

    router:[

        //將頁面元件與path指定的路由關聯

        {path:'/home',component:Home},

        {path:'/explorer',component:Explorer},

         {path:'/cart',component:Cart},

          {path:'/me,component:Me}

    ]

})

new Vue({

    el:'#app',

    //將路由例項新增到Vue例項中

    router,

    render:h=>h(App)

})

2.像上面這種路由配置我們應該從main.js中抽離出來，單獨儲存在router.js裡面(可以放在config資料夾中)，再在Main.js中引入即可

router.js:

import Vue from 'vue'

import VueRouter from 'vue-router'

//引入建立的四個頁面

import Home from './Home.vue'

import Explorer from './Explorer.vue'

import Cart from './Cart.vue'

import Me from './Me.vue'

//使用路由例項外掛

Vue.use(VueRouter)

const router = new VueRouter({

    mode:'history',

    base:__dirname,

    router:[

        //將頁面元件與path指定的路由關聯

        {path:'/home',component:Home},

        {path:'/explorer',component:Explorer},

         {path:'/cart',component:Cart},

          {path:'/me,component:Me}

    ]

})

main.js:

import Vue from 'vue'

import App from './App.vue'

import router from './config/routes'

new Vue({

    el:'#app',

    //將路由例項新增到Vue例項中

    router,

    render:h=>h(App)

})