正心全栈编程-文档站

Appearance

vue 路由简介 ​

官网：https://router.vuejs.org/zh/

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

具体使用示例：

网易云音乐 https://music.163.com/

单页面应用 (SPA): 所有功能在一个 HTML 页面上实现

前端路由作用：实现业务场景切换

优点：

  • 整体不刷新页面，用户体验更好

  • 数据传递容易，开发效率高

缺点：

  • 开发成本高 (需要学习专门知识)

  • 首次加载会比较慢一点。不利于 seo

vue-router 安装 ​

目标：学会 vue 官方提供的 vue-router 路由系统功能模块使用

安装

bash
npm install vue-router

导入路由

js
import { createRouter, createWebHashHistory } from "vue-router";

创建路由规则数组

js
const routes = [];

创建路由对象 - 传入规则

js
export const router = createRouter({
  history: createWebHashHistory(),
  routes: routes,
});

在 main.js 中使用路由插件

js
// 在 vue 中，使用使用 vue 的插件，都需要调用 Vue.use()
const app = createApp(App);
app.use(router);
app.mount("#app");

修改 src/App.vue 文件，将 components 换成 router-view

vue
<script setup></script>
vue
<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/part">朋友</a>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>
vue
<style scoped>
.footer_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}

.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}

.footer_wrap a:hover {
  background-color: #555;
}

.top {
  padding-top: 62px;
}
</style>

总结 1: 下载路由模块，编写对应规则注入到 vue 实例上，使用 router-view 挂载点显示切换的路由

总结 2: 一切都围绕着 hash 值变化为准

至此，最简单的路由跳转已经写好了，但是点击之后不会切换，因为路由数组中没有给子路由，然后给添加上

js
const routes = [
  { path: "/find", component: () => import("./views/Find.vue") },
  { path: "/my", component: () => import("./views/My.vue") },
  { path: "/part", component: () => import("./views/Part.vue") },
];

然后新建 views 目录，在里面分别创建三个组件

vue
<template>
  <div>
    <p>歌单列表</p>
  </div>
</template>
vue
<template>
  <div>
    <p>我的收藏</p>
  </div>
</template>
vue
<template>
  <div>
    <p>寻找伙伴</p>
  </div>
</template>

然后路由就可以正常跳转了

请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

router-view ​

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

路由模式 ​

目标：修改路由在地址栏的模式

hash 路由例如：http://localhost:8080/#/home

history 路由例如：http://localhost:8080/home (以后上线需要服务器端支持，否则找的是文件夹)

模式文档

修改 router/index.js

js
import { createWebHistory } from "vue-router";
// createWebHashHistory 哈希模式
// createWebHistory 路由模式

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
});

模块化使用路由 ​

在项目中操作路由一般是单独新建一个模块进行操作。

新建文件夹与文件 src/router/index.js , 然后将 main.js 中与模块有关的逻辑全部复制过去，然后需要调整一下其中的路径

js
import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
  { path: "/find", component: () => import("../views/Find.vue") },
  { path: "/my", component: () => import("../views/My.vue") },
  { path: "/part", component: () => import("../views/Part.vue") },
];

export const router = createRouter({
  history: createWebHashHistory(),
  routes: routes,
});

修改之后的 main.js 文件为

js
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";

import { router } from "./router";

const app = createApp(App);
app.use(router);
app.mount("#app");

对于以后与路由有关的逻辑，全部可以写在 src/router 目录下