# 路由管理——使用vue-router
# 前言
安装vue-router
vue add router
# 1. 理解路由视图
- 传统路由与 vue 的路由
传统的页面是由一个个的html
文件组成,而 vue 由一个html
页面和若干组件组成。这就决定了 vue 的路由和传统路由的不同
- 传统路由管理的 html 页面,而 vue 的路由管理的是一个个组件。
- 传统路由层级由 url 的关联组成,而 vue 的路由层级由组件层级组成。
- vue 路由变化
理解为何 vue 的路由层级由组件层级组成。
观察上面图片,层级 1 中,登录页面以及 404 页面均是独立的组件,而业务页面是由包含 Header 和 Footer 的若干个子组件组成。如何实现不同组件层级之间的渲染呢,使用<router-view>
。router-view
代表一个渲染窗口,其特点是,只能实现同一层级组件的渲染,如果要渲染子组件,那么需要将子组件另外定义一个router-view
用于渲染。
# 练习 1:实现学生、班级页面的路由渲染
- 添加了
vue-router
后发现多出了一个src/router
文件夹,里面是定义好要加载的路由信息,而App.vue
文件也被重写,里面已经定义好了一个router-view
,这正好用于渲染登录、404 等第 1 层级页面。但是我们还需要渲染班级列表和学生列表页面。 - 新建
src/layouts/MainLayout.vue
- 使用a-layout
- 将内容替换成
<route-view>
- 在
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. 实现跳转
实现路由跳转有两种方式,组件式和路由式
- 组件式,类似于 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>
- 编程式
this.$router.push("/");
this.$router.replace("/");
// 携带参数
this.$router.push({ path: "/", query: { id: "123123" } });
其具有以下四种方法:
- push 跳转到某个路由,最常用。
- replace 调换当前页面的路由,无刷新。
- resolve 解析路由并跳转,适用于新开 tab 跳转等行为
- go 在历史记录前进或者后退。
使用这几个方法之前,要先理解路由的存储,对于一个网站路由记录的存储,其数据结构为栈,如下:
# 练习 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