github
vue学习笔记（1）主要介绍vue项目的创建
vue学习笔记（2）主要介绍项目的基本设置，如axios设置和项目颜色控制
今天讲解vue一个很重要的组件router，熟悉后台开发的人肯定对router有一定的了解，在我们用jinjia2渲染模板的时候，通常都会定义各种各样的router，router相当于整个项目的导航，每个页面对应的内容，都通过router来控制。
在创建好了的vue项目中有一个src/router.js文件（得在用脚手架创建项目的时候勾选router组件）并且在src/main.js已经将router绑定到vue实例上。
一、main.js注册router
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
通过将router当做实例化Vue的参数，将router绑定
二、router定义
我们来看一下src下面的router.js文件，来看一下router是怎样定义的。
import Vue from 'vue'
import Router from 'vue-router'
#定义公用方法引入组件
Vue.use(Router)
const resolve = path => () => import(`@/views/${path}`)
#将router定义成常量，后续能够给router添加相应的守卫方法
const router = new Router({
mode: 'history' #默认router模式是hash模式，url上会有个#符号，如果使用history，url上则不会出现#
base: process.env.BASE_URL, #可以在配置文件中设置，打包可以生成不同的路由前缀。
#方便测试环境和正式环境的文件打包
routers: [{
path: '/'
name: 'login',
meta: {title: '登录'}, # router携带的自定义信息要放在meta中
component: resolve('Login')
}]
})
router.afterEach(to => {
if (to.meta && to.meta.title) {
document.title = to.meta.title
}
})
export default router
这样一个简单的router就创建完了。但是还有很多复杂的页面，如有些页面结构一致，只有一部分内容需要更换，如那种左侧或顶部菜单栏功能。这种的话，只有内容区的内容需要更换，其他部分内容都是不变的。
在该项目中我引入了element-ui库
- 安装element-ui库
npm install element-ui
- 引入element-ui库
在main.js中添加如下代码
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'#引入element样式文件
Vue.use(ElementUI)
那怎么构建一个只有内容变化，但其他内容不变的页面呢？
首先创建Home.vue
<template>
<div class="main-container">
<el-container>
<el-header height="50px">这是顶部导航栏</el-header>
<el-container mode="horizontal">
<el-aside width="250px">
这是左边栏
</el-aside>
<el-main>
#这是内容区
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
然后一个简单的布局就这样构建完成了，顶部导航和左边栏需要对应的内容填充。
你会发现左边栏和内容区的内容是根据内容进行变化的，这个时候在styles创建element.styles.scss文件
并且在App.vue中引入
<style lang="scss">
@import "@/styles/element.reset.scss";
</style>
#app {
.el-container {
height: 100vh;
}
}
这样就解决了上述问题了。
而内容区则可以在路由中进行定义。
假设有两个页面，一个是用户界面User，另一个是组界面Group
那么router就可以进行改装了。
const router = new Router({
mode: 'history' #默认router模式是hash模式，url上会有个#符号，如果使用history，url上则不会出现#
routers: [{
path: '/'
name: 'login',
meta: {title: '登录'}, # router携带的自定义信息要放在meta中
component: resolve('Login')
}, {
path: '/main',
component: resolve('Home'),
children: [{
path: 'user',
name: 'UserIndex',
component: resolve('User')
},{
path: 'group',
name: 'GroupIndex',
component: resolve('Group')
}]
}]
})
那么对应的路由/main/user和/main/group的内容就由组件User和Group进行控制了。
这里其实用到了router-view，在router解析的时候会将children里的component填充到router-view的位置上，当然这里也可以使用多个router-view，然后添加不同的名字，那么children里就需要使用components来进行一一对应，根据不同的名字，会将不同的内容添加到不同的位置。例如：
<template>
<div class="main-container">
<el-container>
<el-header height="50px"><router-view name='header'></router-view></el-header>
<el-container mode="horizontal">
<el-aside width="250px">
<router-view name='leftside'></router-view>
</el-aside>
<el-main>
#这是内容区
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
注意router-view只有一个可以是默认的，也就是不需要带name参数。那么对应的router应该怎样编写呢？
children: [{
path: 'user',
name: 'UserIndex',
component: {
default: resolve('User'),
header: resolve('header'),
leftside: resolve('leftside')
}
}
当然如果在路由中进行定义，那么其router-view位置则不进行填充。
router的相关问题进行就到这了，后续会陆续进行补充。谢谢！
