4.Vue路由懒加载使用@babel/plugin-syntax-dynamic-import
使用官方案例@babel/plugin-syntax-dynamic-import · Babel (babeljs.io)https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/安装完后在项目中填如下代码'@babel/plugin-syntax-dynamic-import'安装官方的案例更改路由代码懒加载可以提高运行效率如下
·
安装完后在项目中
填如下代码
'@babel/plugin-syntax-dynamic-import'
安装官方的案例更改路由代码
懒加载可以提高运行效率
如下
login_home_welcome三个组件为一组
例子:
// import Login from '@/components/LoginL.vue'
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '@/components/LoginL.vue')
// import Home from '@/components/HomeL.vue'
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '@/components/HomeL.vue')
// import WelCome from '@/components/WelCome.vue'
const WelCome = () => import(/* webpackChunkName: "login_home_welcome" */ '@/components/WelCome.vue')
这样就实现了路由的懒加载,提高运行效率
下面的路由还是之前的引用
总结:
具体需要3步:
①安装@babe/plugin syntax dynamic import包。
⑦在babel.configjs配置文件中声明该插件。
③将路由改为按需加载的形式,示例代码如下:
const FoO - () -> import (/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar - ()一> import (/* webpackChunkName: "group-foo" */ './Bar. vue')
const Baz - ()一> import (/* webpackChunkName: "group-boo" */ './Baz. vue')
希望对大家有所帮助
以下参考
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 Users from '../components/user/Users.vue'
// import Rights from '../components/power/Rights.vue'
// import Roles from '../components/power/Roles.vue'
// import Cate from '../components/goods/Cate.vue'
// import Params from '../components/goods/Params.vue'
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')
const Users = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/user/Users.vue')
const Rights = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Rights.vue')
const Roles = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Roles.vue')
const Cate = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Cate')
const Params = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Params')
const GoodsList = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/List')
const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/Add')
const Order = () => import(/* webpackChunkName: "Order_Report" */ '../components/order/Order')
const Report = () => import(/* webpackChunkName: "Order_Report" */ '../components/report/Report')
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: Login
}, {
path: '/home',
redirect: '/welcome',
component: Home,
children: [
{
path: '/welcome',
component: Welcome
},
{
path: '/users',
// component: () => import('@/components/user/Users.vue')
component: Users
},
{
path: '/rights',
// component: () => import('@/components/power/Rights.vue')
component: Rights
},
{
path: '/roles',
// component: () => import('@/components/power/Roles.vue')
component: Roles
},
{
path: '/categories',
// component: () => import('@/components/goods/Cate.vue')
component: Cate
},
{
path: '/params',
// component: () => import('@/components/goods/Params.vue')
component: Params
},
{
path: '/goods',
// component: () => import('@/components/goods/List.vue')
component: GoodsList
},
{
path: '/goods/add',
// component: () => import('@/components/goods/Add.vue')
component: Add
},
{
path: '/orders',
// component: () => import('@/components/order/Order.vue')
component: Order
},
{
path: '/reports',
// component: () => import('@/components/report/Report.vue')
component: Report
}
]
}]
})
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
// to 将要访问的路径
// from 代表从按个路径跳转而来
// next 是一个函数, 表示放行
// next() 放行 next('/login') 强行跳转
if (to.path === '/login') {
return next()
}
// 获取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) {
return next('/login')
}
next()
})
export default router
更多推荐
已为社区贡献6条内容
所有评论(0)