5 Star 1 Fork 0

View、 / vue-guide

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
vue-router.md 2.03 KB
一键复制 编辑 原始数据 按行查看 历史
View、 提交于 2020-02-06 17:44 . first commit

Vue Router 规范

标准示例

  • 使用 import 而非 required
  • 不写文件尾缀 .vue
  • 模块拆分为单个文件
  • 额外属性命名在 meta
  • meta title 属性需要命名

/ src / router / index.js

import Vue from 'vue'
import Router from 'vue-router'
import customer from './customer'
import template from './template'
import product from './product'
import system from './system'
import market from './market'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'base',
            redirect: '/home',
            component: () => import('../layout/layout'),
            children: [
                {
                    path: '/home',
                    name: 'home',
                    component: () => import('../views/home'),
                    meta: {
                        title: '首页',
                        icon: 'home',
                        closable: false,
                        keepAlive: true
                    }
                },
                ...customer,
                ...template,
                ...product,
                ...system,
                ...market
            ]
        },
        {
            path: '/login',
            name: 'login',
            component: () => import(/* webpackChunkName: "login" */'../views/login')
        },
        {
            path: '*',
            component: () => import('../views/404')
        }
    ]
})

/ src / router / customer.js

let customer = [
    {
        path: '/customer/group',
        name: 'customer/group',
        component: () => import('../views/customer/customer-group'),
        meta: {
            title: '客户群组管理',
            keepAlive: true
        }
    },
    {
        path: '/customer/group-member',
        name: 'customer/group-member',
        component: () => import('../views/customer/gruop/group-member'),
        meta: {
            title: '群组成员管理',
            keepAlive: true
        }
    }
    // ...
]

export default customer
1
https://gitee.com/viewweiwu/vue-guide.git
git@gitee.com:viewweiwu/vue-guide.git
viewweiwu
vue-guide
vue-guide
master

搜索帮助