Vue router

1、技术概述，描述这个技术是做什么？

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

2、技术详述

第一步，创建一个入口文件app.vue用来指定组件渲染的位置

<template>
  <div class="manageTask container">
      <router-view></router-view>
  </div>
</template>

第二步，对路径进行配置

Vue.use(VueRouter)
const routes = [
   //指定默认渲染页面
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'login',
    //导入渲染的页面级组件
    component: () => import('../views/login.vue')
  },
  {
    path: '/outer',
    name: 'outer',
    component: () => import('../views/Outer.vue'),
     //指定子路径
    children: [
      {
        path: 'overview',
        name: 'overview',
        meta: { title: '概览' },
        component: overview
      }
    ]
  }

]

3、技术使用中遇到的问题和解决过程。

在使用vue-router的过程中，

this.$router.push({
        name: 'detail',
        parms: {
          id: that.id
        }
     })

👆push过程中参数无法被目的页面获取到，使用下述方法可以解决

this.$router.push({
        path: 'detail',
        query: {
          id: that.id
        }
     })

4、进行总结。

vue-router的使用极大的方便了单应用页面的构建，不同页面的传参，跳转的过程得到了许多便利，节省了很多时间