【VUE】vue-router的基本用法

vue-router的應用十分簡單，只有兩步，配置好router檔案，在Vue例項中引入即可。

第一步：根據需求配置router檔案

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Task from '@/components/Task'
import Share from '@/components/Share'
Vue.use(Router)

export default new Router({     // 匯出router模組
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path: '/task',
      name: 'Task',
      component: Task
    },
    {
      path: '/share',
      name: 'Share',
      component: Share
    }
  ]
})

第二步：在Vue的例項中引入router

import Vue from 'vue'
import App from './App'
import router from './router'    //引入router模組

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,     //將router注入到vue例項
  components: { App },
  template: '<App/>'
})

 

這樣簡單的路由配置就成功了。

 

在元件中可以通過this.$route/this.$routes/this.router訪問路由的相關屬性和方法

在元件中通過輸出操作來檢視這三個屬性有什麼不同

可以看到

this.$route指的當前頁面的當前路由物件，從該物件的相關屬性，如params、query等可以取到當前路由的url引數。所以，要操作當前路由就用this.$route

this.$routes為undefined，證明不存在該物件

this.$router可以理解為整個專案的路由管理者，從這裡可以看到整個專案的路由配置，也可以對整個專案的路由做修改，通過addRoutes方法可以新增新的路由，還有歷史記錄相關操作，通過go和back可以進行相關的歷史記錄回退和前進。所以，要操作整個專案的路由就用this.$router

 

特別提到注意事項：

1.addRoutes()方法接收的是陣列，使用物件會報錯（Uncaught TypeError: routes.forEach is not a function）

2.物件裡面的鍵名component注意不要寫成複數components，否則會報錯

（TypeError: Cannot read property '$createElement' of undefined）