Vue第六章路由系统、路由流程、路由配置、懒加载和非懒加载的差异、嵌套路由、编程式跳转、路由参数

张的俊.

已于 2023-03-31 11:35:35 修改

阅读量682

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript html 前端框架

于 2022-10-08 18:44:43 首次发布

本文链接：https://blog.csdn.net/a2499797637/article/details/127213769

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

路由系统

多页项目的制作: 一个大型网站需要由多个页面组成
做法分两种:
1. 传统方案: 每个网页是一个`html`文件, 通过超链接的href 来实现页面跳转
  1. 特点: 先清空之前的页面, 然后显示新的页面 -- 页面有闪烁的感觉
2. 新方案: Ajax 局部切换
  1. 特点: 不需要清空整个页面, 只需要把局部内容删除换成新的即可
  2. 新方案的专业名词: `SPA` - Single Page Application 单个页面应用
  3. 整个网站只有一个 html 页面, 利用局部内容切换来实现多页效果
  4. 这套方案依赖一款框架: Vue Router :https://router.vuejs.org/zh/
路由占位符: 在实际显示时,会切换成对应的组件
自定义组件分两种:
1. 组成页面的一部分, 目的是复用: 按钮;标签;超链接;存储在 components 中
2. 组成页面的一部分, 目的是整体切换: 路由系统切换的页面存储在 views 中

路由流程

首先书写组件存放的占位符
Vue会自动检测路径的值，通过路径前往router/index.js配置文件中寻找对应的组件
通过路径找到对应的组件，将组件替换掉占位符

路由配置

非懒加载: 先import 再使用
1. import NewsPage from '../views/NewsPage.vue'
2. path: 路径; 必须 / 开头
3. component: 组件; 代表路径对应的组件
懒加载 : 利用箭头函数引入, 临时调用函数时再引入
1. 未使用前不引入; 使用时临时引入

懒加载和非懒加载的差异

路由配置文件中有两种配置方式
把`非常用`页面做成懒加载的 -- 首次加载时不加载, 使用时临时加载
把`常用`的页面做成非懒加载的 -- 首次加载时直接加载, 后续可以直接使用提高体验

一种为非懒加载，先引入后配置

import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
    //下面会讲到嵌套路由，这里先混个眼熟
    children: [
      {
        path: "/home/index",
        name: "routeName",
        meta: {
          keepAlive: true,
        },
        component: () => import("../views/Home.vue"),
      },
      {
        path: "/home/me",
        name: "routeName",
        component: () => import("../views/Me.vue"),
      },
    ],
  },
]

另一种为懒加载，直接配置

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/login",
    name: "routeName",
    component: () => import("../views/Login.vue"),
    },
  {
    path: "/BinPage",
    name: "routeName",
    component: () => import("../views/BinPage.vue"),
    },
  {
    path: "/AboutView",
    name: "routeName",
    component: () => import("../views/AboutView.vue"),
    },
]

懒加载与非懒加载的差异

嵌套路由

嵌套路由可以通过二级路由（多级路由）的方式动态修改页面的局部内容。这种页面中需要动态修改的内容由路由来控制。
实现步骤：
1. 先准备好3个组件：`Container.vue Table.vue Form.vue`。
2. 在`router/index.js`中配置`Component`组件的子路由。
3. 在`el-main`里，添加占位符。`<router-view/>`。

import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
    children: [
      {
        path: "/home/index",
        name: "routeName",
        meta: {
          keepAlive: true,
        },
        component: () => import("../views/Home.vue"),
      },
      {
        path: "/home/me",
        name: "routeName",
        component: () => import("../views/Me.vue"),
      },
    ],
  },
]

编程式跳转

页面跳转方式分两种: 标签式和编程式
标签式
1. <router-link to="/">首页</router-link>
2. to: 是router-link的必备属性, 不写会爆红
3. 自带激活样式
  
  - 模糊: `router-link-active`
  - 精确: `router-link-exact-active
4.  <router-view />
5. ```
<router-link to="/about">关于</router-link>
```
编程式
1. 通过方法配置跳转 this.$router.push('/about')
2. <button @click="goto('/news')">新闻</button>
3. <button @click="goto('/login')">登录</button>
路由对象在 router/index.js 中初始化并导出，在 main.js 中被引入和填写到 vue 对象里
console.log(this.$router) //从vue中获取路由对象
push: 用于在路径中推入新的路径
报错: 如果重复跳转,则会抛出错误
1. 跳转前先判断: 当前路径和要跳转到的路径是否相同
2. 如果相同, 就不跳转
3. if (this.$router.currentRoute.path == path) return
当前路由信息读取: this.$router.currentRoute 太长了
1. 作者提供了简化的属性 $route, 可以快速读取
2. if (this.$route.path == path) return 相当于 $route(){return this.$router.currentRoute}

路由参数

路由传参类似于 get的传参

格式: 路径?参数=值&参数=值...

<router-link to="/about?name=xxx&age=22&phone=13688778888">关于xxx</router-link>

<router-link to="/about?name=xxx&age=18&phone=15788779999">关于xxx</router-link>