小编给大家分享一下vue2路由vue-router配置的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
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>
h2, h3 {
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>
h2, h3 {
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'
Vue.use(VueRouter)
//懒加载路由
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
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>以上是“vue2路由vue-router配置的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
