学习笔记
1.安装路由懒加载 插件 @babel/plugin-syntax-dynamic-import
npm install --save-dev @babel/plugin-syntax-dynamic-import
2.在babel.config.js配置文件中声明该插件 在文件中写入： "@babel/plugin-syntax-dynamic-import"
//项目发布阶段需要用到的babel插件
const productPlugins = []
//判断是开发还是发布阶段
if (process.env.NODE_ENV === 'production') {
//发布阶段
productPlugins.push("transform-remove-console")
}
module.exports = {
"presets": [
"@vue/app"
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
],
...productPlugins,
//配置路由懒加载插件
"@babel/plugin-syntax-dynamic-import"
]
}
3.讲路由改为按需加载的形式
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
// const Home = () => import('@/components/home')
// const Index = () => import('@/components/index')
// const Index = () => import('@/components/login')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块
const Home = () => import(/* webpackChunkName: 'home' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'home' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'home' */ '@/components/login')
4.例子
import Vue from 'vue'
import VueRouter from 'vue-router'
// import login from '@/components/login.vue'
// import home from '@/components/home.vue'
// import welcome from '@/components/welcome.vue'
// import user from '@/components/user/user.vue'
// import reports from '@/components/statistics/reports.vue' //数据报表
// import categories from '@/components/goods/categories.vue' //商品列表
// import goods from '@/components/goods/goods.vue' //商品参数
// import params from '@/components/goods/params.vue' //商品分类orders
// import orders from '@/components/dingdan/orders.vue' //订单管理
// import rights from '@/components/authority/rights.vue' //角色列表
// import roles from '@/components/authority/roles.vue' //权限列表
// import goodsadd from '@/components/goods/conm/add.vue' //添加商品
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/login'
},
//把 login和home分到一个组login_home_welcome
{
path: '/login',
component: () => import(/* webpackChunkName:"login_home_welcome" */ '@/components/login.vue')
},
{
path: '/home',
component: () => import(/* webpackChunkName:"login_home_welcome" */ '@/components/home.vue'),
redirect: '/users',
children: [
{
path: '/welcome',
// component: welcome
component: () => import(/* webpackChunkName:"home_users" */ '@/components/welcome.vue'),
},
{
path: '/users',
// component: user
component: () => import(/* webpackChunkName:"home_users" */ '@/components/user/user.vue'),
},
{
//数据报表
path: '/reports',
// component: reports
component: () => import(/* webpackChunkName:"home_users" */ '@/components/statistics/reports.vue'),
},
{
//商品列表
path: '/categories',
// component: categories
component: () => import(/* webpackChunkName:"home_user" */ '@/components/goods/categories.vue'),
},
{
//商品参数
path: '/goods',
// component: goods,
component: () => import(/* webpackChunkName:"home_user" */ '@/components/goods/goods.vue'),
},
{
//添加商品
path: '/goods/add',
// component: goodsadd
component: () => import(/* webpackChunkName:"home_user" */ '@/components/goods/conm/add.vue'),
},
{
//商品分类
path: '/params',
// component: params
component: () => import(/* webpackChunkName:"home_home" */ '@/components/goods/params.vue'),
},
{
//订单管理
path: '/orders',
// component: orders
component: () => import(/* webpackChunkName:"home_home" */ '@/components/dingdan/orders.vue'),
},
{
//角色列表
path: '/rights',
// component: rights
component: () => import(/* webpackChunkName:"home_home" */ '@/components/authority/rights.vue'),
},
{
//权限列表
path: '/roles',
// component: roles
component: () => import(/* webpackChunkName:"home_home" */ '@/components/authority/roles.vue'),
}
]
}
]
const router = new VueRouter({
// mode: 'history',
base: process.env.BASE_URL,
routes
})
//前置导航守卫
router.beforeEach((to, from, next) => {
console.log(to.path);
if (to.path == '/login') return next() //判断访问前的路劲是否是 /login 是的话就放行
const tok = sessionStorage.getItem('token') //获取token
// console.log(tok);
if (!tok)
//判断token 是否存在 存在就放行，不存在就强制跳转到登录界面
return next('/login') //强制跳转到login
next() //放行
})
export default router
