Vue3 中路由Vue Router 的使用实例详解

介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，可以很方便的用于构建单页应用程序。Vue Router 2.x 版本为 Vue 2.x 版本提供路由功能，而 Vue Router 3.x 版本为 Vue 3.x 版本提供路由功能，并在性能和体积方面得到了大幅度提升。

安装

在使用 Vue Router 之前，我们需要先安装 Vue.js。Vue Router 3.x 版本支持 Vue 3.x 版本，因此需要使用 Vue 3.x 所需的版本的 npm 库。可以通过以下命令来安装 Vue Router：

npm install vue-router@next

在安装完成后，在 Vue 3 中导入 Vue Router：

import { createRouter, createWebHashHistory } from 'vue-router'

这里通过 createRouter 和 createWebHashHistory 函数分别创建一个 vue-router 实例和 Hash 模式的路由模式。

添加路由

在创建 vue-router 实例时，我们需要定义路由列表。路由列表分为两部分，一部分是路由描述符，另一部分是页面组件。

在 Vue Router 3.x 中，添加路由的方式比 Vue Router 2.x 有所不同。我们需要先通过 createRouter 函数来创建 router 实例，再通过该实例的 routes 属性来定义路由列表。

import { createRouter, createWebHashHistory } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes, // 等同于routes: routes
});

在这个例子中，我们定义了两个路由描述，分别是 Home 和 About。对应着上面的定义，我们还需要新建两个组件文件：Home.vue 和 About.vue，并在这两个文件中编写对应的页面代码。

页面跳转

Vue Router 提供了两种方式来进行页面跳转，分别是声明式导航和编程式导航。

声明式导航

声明式导航建立在 HTML 模板和 Vue.js 组件的基础之上。可以直接使用标签来实现导航的效果。以下是一个例子：

<!-- Home 页面 -->
<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">About</router-link>
  </div>
</template>

<!-- About 页面 -->
<template>
  <div>
    <h1>About</h1>
    <router-link to="/">Home</router-link>
  </div>
</template>

在上面的例子中，我们使用了 router-link 组件来代替 a 标签，并将该组件的 to 属性设置为目标页面的路由路径。

编程式导航

如果需要在 JavaScript 代码中跳转页面，则需要使用编程式导航。Vue Router 提供了两个 API，分别是 $router.push 和 $router.replace。

push

push 用于向历史记录添加一个新的记录，并且跳转到该记录的路径。

// 通过 name 属性跳转
this.$router.push({ name: "Home" });

// 通过 path 属性跳转
this.$router.push({ path: "/" });

// 通过带参的 path 跳转
this.$router.push({ path: "/about", query: { user: "jack" } });

replace

replace 和 push 一样，用于跳转页面，区别在于 replace 不会在浏览器历史记录中添加新的记录。

// 通过 name 属性跳转
this.$router.replace({ name: "Home" });

// 通过 path 属性跳转
this.$router.replace({ path: "/" });

// 通过带参的 path 跳转
this.$router.replace({ path: "/about", query: { user: "jack" } });

示例

下面提供一个完整的示例。该示例包含两个页面，分别是 Home 页面和 About 页面，以及页面之间的路由跳转。

安装依赖

首先需要安装 Vue.js、Vue Router 以及样式框架 Bootstrap：

npm install vue@next vue-router@next bootstrap

目录结构

- src
  - views
    - Home.vue
    - About.vue
  - main.js
  - router.js
  - App.vue

Home.vue

<template>
  <div class="container mt-5">
    <h1>Home</h1>
    <p>欢迎来到我的首页</p>
    <router-link class="btn btn-primary" to="/about">查看关于我 →</router-link>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

About.vue

<template>
  <div class="container mt-5">
    <h1>About</h1>
    <p>我是一名前端开发工程师</p>
    <router-link class="btn btn-primary" to="/">返回首页 →</router-link>
  </div>
</template>

<script>
export default {
  name: "About",
};
</script>

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

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

router.js

import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

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

export default router;

App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

在 index.html 文件中，添加一个 id 为 app 的空的 div 节点。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Router Example</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./dist/app.js"></script>
  </body>
</html>

最后，在 package.json 文件中，添加以下 script：

{
  "scripts": {
    "build": "vue-cli-service build"
  }
}

在命令行运行以下命令，即可将代码打包成 app.js 文件。

npm run build

总结

Vue Router 是 Vue.js 官方的路由管理器，提供了丰富的路由功能。在 Vue 3 中使用 Vue Router，需要先通过 createRouter 函数创建 router 实例，再在该实例中定义路由列表。在 HTML 中，我们可以使用 router-link 组件来达到页面跳转的效果。在 JavaScript 中，可以使用 $router.push 和 $router.replace 来实现页面跳转的操作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue3 中路由Vue Router 的使用实例详解 - Python技术站

Vue3 中路由Vue Router 的使用实例详解

Vue3 中路由Vue Router 的使用实例详解

介绍

安装

添加路由

页面跳转

声明式导航

编程式导航

push

replace

示例

安装依赖

目录结构

Home.vue

About.vue

main.js

router.js

App.vue

总结

相关文章