vue学习笔记（3）——router

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的相关问题进行就到这了，后续会陆续进行补充。谢谢！