没有合适的资源?快使用搜索试试~ 我知道了~
首先新建vue工程,一般我们不会特殊处理路由,但当项目页面越来越多,路由配置也会越来越大,路由文件就会变得不好维护 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Home from '@/components/Home' import Test1 from './test1.router.js' import Test2 from '@/components/children/Test2' import Test3 fr
资源详情
资源评论
资源推荐
VUE路由动态加载实例代码讲解路由动态加载实例代码讲解
首先新建vue工程,一般我们不会特殊处理路由,但当项目页面越来越多,路由配置也会越来越大,路由文件就会变得不好维
护
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Test1 from './test1.router.js'
import Test2 from '@/components/children/Test2'
import Test3 from '@/components/children/Test3'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/',
name:'Home',
component:Home,
children:[
{
path:'/test2',
name:'Test2',
component:Test2,
},
{
path:'/test3',
name:'Test3',
component:Test3,
}
]
}
] })
这是一个很简单的路由文件,我们先进性第一步优化,按一级菜单分类:
新建test1.router.js文件,放置一级菜单test1下的所有路由信息
export default {
path:'/test1',
name:'test1',
component: () => import('@/components/children/Test1'),
children:[] }
component: () => import(‘@/components/children/Test1’)这个是配置路由懒加载,优化首屏加载缓慢
在index.js里引入该文件
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Test1 from './test1.router.js'
import Test2 from './test2.router.js'
import Test3 from './test3.router.js'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/HelloWorld',
weixin_38662327
- 粉丝: 5
- 资源: 922
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0