发布于 2017-04-29 12:13:31 | 869 次阅读 | 评论: 0 | 来源: 网友投递
Vue.js 轻量级 JavaScript 框架
Vue.js 是构建 Web 界面的 JavaScript 库，提供数据驱动的组件，还有简单灵活的 API，使得 MVVM 更简单。
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> 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phperz。