一：做vue项目的考虑：
1.设置路由
先梳理页面，建立对应的路由
2.根据路由见组件，形成一一对应的关系
3.考虑用户体验
设置404等相关页面/nprogress页面加载进度条
二：设置路由：
安装好vue cli后，在编辑器打开项目
找到router文件夹下面的index.js文件，设置项目路由（此处以最近做过的项目为例）
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
};
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home,
children: [
{
path: 'member',
name: 'Member',
meta: {
title: '成员报告',
},
component: () => import(/* webpackChunkName: "member" */ '../views/Member.vue')
},
{
path: 'myreport',
name: 'Myreport',
component: () => import('../views/Myreport.vue'),
meta: {
keepAlive: true,
},
children: [
{
//写报告
path: 'wrtreport',
name: 'Wrtreport',
component: () => import(/* webpackChunkName: "Wrtreport" */ '../views/Wrtreport.vue'),
meta: {
title: '写报告',
},
},
{
//草稿箱
path: 'drafts',
name: 'Drafts',
component: () => import(/* webpackChunkName: "drafts" */ '../views/Drafts.vue'),
meta: {
title: '草稿箱',
},
},
{
//历史报告
path: 'historyreport',
name: 'HistoryReport',
component: () => import(/* webpackChunkName: "historyreport" */ '../views/HistoryReport.vue'),
meta: {
title: '历史报告',
},
},
{
//权限设置
path: 'power',
name: 'Power',
component: () => import(/* webpackChunkName: "power" */ '../views/Power.vue')
}
]
},
{
//编辑页
path: 'edit',
name: 'Edit',
meta: {
keepAlive: true,
title: '创建报告'
},
component: () => import(/* webpackChunkName: "edit" */ '../views/Edit.vue'),
},
{
//详情页
path: '/detail/:id',
name: 'Detail',
meta: {
keepAlive: true,
title: '报告详情'
},
component: () => import(/* webpackChunkName: "detail" */ '../views/Detail.vue')
},
{
//权限设置
path: 'power',
name: 'Power',
component: () => import('../views/Power.vue'),
children: [
{
//报告权限设置
path: 'powerreport',
name: 'Powerreport',
component: () => import(/* webpackChunkName: "Powerreport" */ '../views/Powerreport.vue'),
meta: {
title: '报告权限设置',
},
},
{
//我可查看成员
path: 'viewmembers',
name: 'Viewmembers',
component: () => import(/* webpackChunkName: "Viewmembers" */ '../views/Viewmembers.vue'),
meta: {
title: '我可查看成员',
},
},
{
//关注成员
path: 'focusmembers',
name: 'Focusmembers',
component: () => import(/* webpackChunkName: "Focusmembers" */ '../views/Focusmembers.vue'),
meta: {
title: '关注成员',
},
}
]
},
{
path: 'template',
name: 'Template',
component: () => import('../views/Template/Index.vue'),
children: [
{
path: 'manage',
name: 'Manage',
component: () => import(/* webpackChunkName: "template-manage" */ '../views/Template/Manage.vue'),
meta: {
title: '部门模版管理',
},
},
{
//我可查看成员
path: 'library',
name: 'Library',
component: () => import(/* webpackChunkName: "template-library" */ '../views/Template/Library.vue'),
meta: {
title: '模板库',
},
},
{
//关注成员
path: 'librarian',
name: 'Librarian',
component: () => import(/* webpackChunkName: "template-librarian" */ '../views/Template/Librarian.vue'),
meta: {
title: '管理权限设置',
},
}
]
}
]
},
{
path: '/template/edit/:id',
name: 'EditTemplate',
meta: {
title: '编辑模版',
},
component: () => import(/* webpackChunkName: "custom_template" */ '../views/CustomTemplate.vue')
},
{
path: '/404',
name: '',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/404.vue')
}
]
const router = new VueRouter({
routes
})
export default router
网友评论