Vue路由

2018-07-09 13:47:57来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Node.js中文乱码解决方法

下一篇:Vue状态管理