风车 | 前端同一构建平台

# 路由管理——使用vue-router

# 前言

安装vue-router

vue add router

# 1. 理解路由视图

  1. 传统路由与 vue 的路由

传统的页面是由一个个的html文件组成，而 vue 由一个html页面和若干组件组成。这就决定了 vue 的路由和传统路由的不同

  • 传统路由管理的 html 页面，而 vue 的路由管理的是一个个组件。
  • 传统路由层级由 url 的关联组成，而 vue 的路由层级由组件层级组成。
  1. vue 路由变化

理解为何 vue 的路由层级由组件层级组成。

路由层级

观察上面图片，层级 1 中，登录页面以及 404 页面均是独立的组件，而业务页面是由包含 Header 和 Footer 的若干个子组件组成。如何实现不同组件层级之间的渲染呢，使用<router-view>。router-view代表一个渲染窗口，其特点是，只能实现同一层级组件的渲染，如果要渲染子组件，那么需要将子组件另外定义一个router-view用于渲染。

# 练习 1：实现学生、班级页面的路由渲染

  1. 添加了vue-router后发现多出了一个src/router文件夹，里面是定义好要加载的路由信息，而App.vue文件也被重写，里面已经定义好了一个router-view，这正好用于渲染登录、404 等第 1 层级页面。但是我们还需要渲染班级列表和学生列表页面。
  2. 新建src/layouts/MainLayout.vue
  3. 使用a-layout
  4. 将内容替换成<route-view>
  5. 在src/router/index.js中重新组织路由

这里添加两个页面:

  • Login页面，用于登录。
  • NotFound页面，用于找不到页面处理。
import Vue from "vue";
import VueRouter from "vue-router";
// import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Login",
    component: () => import("../views/Login.vue"),
  },
  {
    path: "/mis",
    name: "Mis",
    component: () => import("../layouts/MainLayout.vue"),
    children: [
      {
        name: "Student",
        path: "/student",
        component: () => import("../views/studentList.vue"),
      },
      {
        name: "Class",
        path: "/class",
        component: () => import("../views/classList.vue"),
      },
    ],
  },
  {
    path: "*",
    name: "NotFound",
    component: () => import("../views/NotFound.vue"),
  },
];

const router = new VueRouter({
  routes,
});

export default router;

访问http://localhost:8080/#/student试试，如果学生页面出现了，说明我们的路由已经成功构建好了！

# 2. 实现跳转

实现路由跳转有两种方式，组件式和路由式

  1. 组件式，类似于 html 中的a。
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

// 携带参数
<router-link :to="{path:'/',query:{id:123123}}">about页面</router-link>
  1. 编程式
this.$router.push("/");
this.$router.replace("/");

// 携带参数
this.$router.push({ path: "/", query: { id: "123123" } });

其具有以下四种方法：

  • push 跳转到某个路由，最常用。
  • replace 调换当前页面的路由，无刷新。
  • resolve 解析路由并跳转，适用于新开 tab 跳转等行为
  • go 在历史记录前进或者后退。

使用这几个方法之前，要先理解路由的存储，对于一个网站路由记录的存储，其数据结构为栈，如下：

router-store

# 练习 2：修改侧边栏

  • 使用router-link将侧边栏修改为:

    -- 学生管理
-- 管理管理
-- 登录页
-- NotFound

  • 实现代码

<a-menu-item v-for="route in routeList" :key="route.path">
    <router-link :to="route.path">{{ route.title }}</router-link>
</a-menu-item>

data(){
    return {
        routeList: [
        {
          path: "/student",
          title: "学生管理",
        },
        {
          path: "/class",
          title: "班级管理",
        },
        {
          path: "/login",
          title: "登录页面",
        },
        {
          path: "/fake",
          title: "NotFound",
        },
      ],
    }
}

# 3. 获取路由参数

// 获取当前路由
this.$route;
  • 注意与this.$Router的区别——少了一个r
  • 获取 query 参数,this.$route.query

打包与构建