前端路由： 在web開發中，路由是指根據url分配到對應的處理程式

vue-router: 通過管理url實現url和元件的對應和通過url進行元件之間的切換

可以做單頁面應用（SPA）：載入單個HTML頁面，並在使用者與應用程式互動時動態更新該頁面

vue-router的使用步驟：

1、npm install vue-router--save    //(安裝模組)

2、import VueRouter  from 'vue-router'  //(引入模組)

3、Vue.use(VueRouter); // 作為Vue的外掛

4、new VueRouter({

    //配置引數

})  //(建立路由例項物件)

5、new Vue({router}) //注入Vue選項引數

6、<router-view></router-view>//告訴路由渲染的位置

在檔案src/main.js檔案中輸入：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App.vue'
import router from './router'

// import './common/index.sass'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//這裡的屬性router跟路由例項的名字剛好重名，可以直接寫成這樣就可以了
  template: '<App/>',
  components: { App }
})
 

在檔案src/router/index.js檔案中輸入：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

let routes = [
  {
    path: '/',
    component: mainContent
  },
  {
    /* 網站管理 */
    path: '/web_manager',
    name: 'webManager',
    component: mainContent,
    children: [
      /* seo優化 */
      {
        name: 'optimizeSeo',
        path: 'optimize_seo',
        component: optimizeSeo
      },
      /* 常規logo */
      {
        name: 'commonLogo',
        path: 'common_logo',
        component: commonLogoPage
      },
      {
        path: '/404',
        name: 'notFound',
        component: notFoundPage
      },
      {
        path: '*',
        component: notFoundPage
      }
    ]
  }]
let router = new Router({
  mode: 'history',
  linkActiveClass: 'active',
  routes
})

export default router
 

以上程式碼就是vue-router的基本使用