Vue路由

1、導入VueRouter

import Vue from 'vue'
import VueRouter from 'vue-router'

2、全局註冊VueRouter插件，在組件中就可以使用this.$router 來訪問路由

Vue.use(VueRouter)

3、定義路由

const routes = [
  {
    path: '/',
    component: function (resolve) {//延遲載入模塊
      require(['./components/home'], resolve)
    }
  }
]

const router = new VueRouter({
  routes
})

4、路由載入前後事件

router.beforeEach(function (to, from, next) {
  next();
})

router.afterEach(function (to) {
 
})

5、創建和掛載根實例。 // 記得要通過 router 配置參數註入路由， // 從而讓整個應用都有路由功能

const app = new Vue({
  router
}).$mount('#app')

 6、JS 路由功能

// url變成：/register
router.push('register');
// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})