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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
