详解vue2路由vue-router配置(懒加载)
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引入路由配置导航:
跳转第一个页面 跳转第二个页面
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。