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' }})

 

转载于:https://www.cnblogs.com/tangchun/p/7987351.html