微客导航 » 文章资讯 » 详解vue2路由vue-router配置（懒加载）

详解vue2路由vue-router配置（懒加载）

2024-02-26 02:09:02 344

vue路由配置以及按需加载模块配置

1、首先在component文件目录下写俩组件：

First.vue:







h1,h2{
font-weight:normal;
}

ul{
list-style-type:none;
padding:0;
}

li{
display:inline-block;
margin:010px;
}

a{
color:#42b983;
}

Second.vue:







h1,h2{
font-weight:normal;
}

ul{
list-style-type:none;
padding:0;
}

li{
display:inline-block;
margin:010px;
}

a{
color:#42b983;
}

2、router目录下的index.js文件配置路由信息：

importVuefrom'vue'
importVueRouterfrom'vue-router'
/*importFirstfrom'@/components/First'
importSecondfrom'@/components/Second'*/

Vue.use(VueRouter)

/*constroutes=[
//重定向
{
path:'/',
redirect:'first'
},
{
path:'/first',
name:'First',
component:First
},
{
path:'/second',
name:'Second',
component:Second
}
]*/

//懒加载路由
constroutes=[
{//当首次进入页面时，页面没有显示任何组件；让页面一加载进来就默认显示first页面
path:'/',//重定向，就是给它重新指定一个方向，加载一个组件；
component:resolve=>require(['@/components/First'],resolve)
},
{
path:'/first',
component:resolve=>require(['@/components/First'],resolve)
},
{
path:'/second',
component:resolve=>require(['@/components/Second'],resolve)
}
//这里require组件路径根据自己的配置引入
]
//最后创建router对路由进行管理，它是由构造函数newvueRouter()创建，接受routes参数。

constrouter=newVueRouter({
routes
})

exportdefaultrouter;

3、main.js中引入路由配置文件：

import$from'jquery'
importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router'//引入路由配置文件
import'./assets/css/bootstrap.min.css'
import'./assets/js/bootstrap.min'
Vue.config.productionTip=false

/*eslint-disableno-new*/
newVue({
el:'#app',
router,//注入到根实例中
render:h=>h(App)
})

4、App.vue引入路由配置导航：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

详解vue2路由vue-router配置（懒加载）

热门推荐

随机推荐