来自 计算机教程 2019-08-14 18:20 的文章
当前位置: 美洲杯冠军竞猜 > 计算机教程 > 正文

解析vue路由异步组件和懒加载案例【篮球世界杯

<template> 
 <div>我是第二个页面</div> 
</template> 

<script> 
 export default { 
 name: 'second', 
 data () { 
  return { 
  msg: 'Welcome to Your Vue.js App' 
  } 
 } 
 } 
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
 font-weight: normal; 
 } 

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

 li { 
 display: inline-block; 
 margin: 0 10px; 
 } 

 a { 
 color: #42b983; 
 } 
</style> 

篮球世界杯冠军竞猜,您可能感兴趣的文章:

First.vue:

最后,如果想要让build之后的代码更便于识别,配置webpack代码

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

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

Second.vue:

案例:

import Vue from 'vue' 
import VueRouter from 'vue-router' 
/*import First from '@/components/First' 
import Second from '@/components/Second'*/ 

Vue.use(VueRouter) 

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

//懒加载路由 
const routes = [ 
 {   //当首次进入页面时,页面没有显示任何组件;让页面一加载进来就默认显示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 对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数。 

 const router = new VueRouter({ 
 routes 
}) 

export default router; 
import Vue from 'vue'

import VueRouter from 'vue-router'

/*import First from '@/components/First' 

import Second from '@/components/Second'*/



Vue.use(VueRouter) 

//方案1

const first =()=>import(/* webpackChunkName: "group-foo" */ "../components/first.vue");

const second = ()=>import(/* webpackChunkName: "group-foo" */ "../components/second.vue");

const three = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/three.vue");

const four = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/four.vue");

//方案2

const first = r => require.ensure([], () => r(require('../components/first.vue')), 'chunkname1')

const second = r => require.ensure([], () => r(require('../components/second.vue')), 'chunkname1')

const three = r => require.ensure([], () => r(require('../components/three.vue')), 'chunkname2')

const four = r => require.ensure([], () => r(require('../components/four.vue')), 'chunkname2')



//懒加载路由 

const routes = [ 

 {  //当首次进入页面时,页面没有显示任何组件;让页面一加载进来就默认显示first页面 

 path:'/', //重定向,就是给它重新指定一个方向,加载一个组件; 

 component:first 

 }, 

 { 

 path:'/first', 

 component:first

 }, 

 { 

 path:'/second', 

 component:second

 }, { 

 path:'/three', 

 component:three

 }, 

 { 

 path:'/four', 

 component:four

 } 

//这里require组件路径根据自己的配置引入 

] 

//最后创建router 对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数。 



 const router = new VueRouter({ 

 routes 

}) 
export default router; 
<template> 
 <div>我是第一个页面</div> 
</template> 

<script> 
 export default { 
 name: 'first', 
 data () { 
  return { 
  msg: 'Welcome to Your Vue.js App' 
  } 
 } 
 } 
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
 font-weight: normal; 
 } 

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

 li { 
 display: inline-block; 
 margin: 0 10px; 
 } 

 a { 
 color: #42b983; 
 } 
</style> 

篮球世界杯冠军竞猜 1

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

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

注意方案1和方案2只能用一个。然后运行项目试验一下就可以了。

本文由美洲杯冠军竞猜发布于计算机教程,转载请注明出处:解析vue路由异步组件和懒加载案例【篮球世界杯

关键词: