ke-vue-router

让你的vue项目更好管理你的路由

安装

yarn add ke-vue-router
or
npm i ke-vue-router

创建一个表实例

import KeRouter from 'ke-vue-router'

const route = new KeRouter()

注册路由

// 注册路由一个首页到vue文件
route.reg('/', () => import('./view/index.vue'))

命名一个index的路由

route.reg(['index', '/'], () => import('./view/index.vue'))
// 我们可以在vue文件里使用index进行路由跳转
this.$router.push({ name: () => import('./view/index.vue') })

meta设置

route.reg('/', () => import('./view/index.vue')).meta({ title: '首页' })

嵌套子路由

route.reg('/', () => import('./view/index.vue')).children(route => {
    route.reg('/log', () => import('./view/log.vue'))

    route.reg('/manage', () => import('./view/manage.vue'))
})

分组通用meta

route.group({ title: '全部页面的标题' }, () => {
    route.reg('/', () => import('./view/index.vue'))
    route.reg('/user', () => import('./view/user.vue'))
})

demo

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import KeRouter from 'ke-vue-router'
import Home from './views/Home.vue'

Vue.use(Router);

const router = new KeRouter();

router.reg('/', Home);


export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: router.data
})