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的使用极大的方便了单应用页面的构建,不同页面的传参,跳转的过程得到了许多便利,节省了很多时间

posted @ 2020-10-09 00:03  会飞的大野鸡  阅读(14)  评论(0编辑  收藏