详解vue2路由vue-router配置（懒加载）
程序员文章站
2022-06-21 08:32:36
vue路由配置以及按需加载模块配置
1、首先在component文件目录下写俩组件：
first.vue:
vue路由配置以及按需加载模块配置
1、首先在component文件目录下写俩组件：
first.vue:
<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>
second.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>
2、router目录下的index.js文件配置路由信息：
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;
3、main.js中引入路由配置文件：
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)
})
4、app.vue引入路由配置导航：
<template>
<router-link to="/first">跳转第一个页面</router-link>
<router-link to="/second">跳转第二个页面</router-link>
<div id="view">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 郭子仪身居高位 为何还会怕一名小官员呢
下一篇： 孕妇吃猪肝可以吗