Vue路由

发表于 2023-10-10 分类于前端开发

Vue 3 中的路由是通过 Vue Router 实现的，Vue Router 是 Vue.js 官方的路由管理库，用于构建单页面应用（SPA）中的路由系统。它允许你在应用程序中定义不同的路由，并为每个路由指定相应的组件，以便在不同的路由之间进行导航和切换。

安装

安装 Vue Router：首先，在你的 Vue 3 项目中安装 Vue Router：

1	npm install vue-router@next

也可以直接引用

1	<script src="https://unpkg.com/vue-router@4"></script>

<router-link>是 Vue Router 中提供的用于创建导航链接的组件。它的作用类似于普通的 <a> 标签，但是它具有一些额外的功能，特别是在单页面应用 (SPA) 中。

以下是 <router-link> 的基本用法：

1	<router-link to="/about">About</router-link>

to 属性：指定要导航到的目标路由的路径。

<router-link> 会自动渲染成一个 <a> 标签，并且会根据目标路由的匹配状态添加一个 router-link-active 的 CSS 类名，以便你可以为活动链接添加样式。

例如，如果当前路径是 “/about”，那么上述代码生成的 HTML 大致如下：

1	<a href="/about" class="router-link-exact-active router-link-active">About</a>

注意以下几点：

<router-link> 会自动处理路由的基本路径，因此你不需要担心在不同环境中配置路径。
<router-link> 会自动添加点击事件处理程序，以阻止默认的页面刷新行为，从而实现无刷新导航。
你可以通过设置 exact 属性来匹配路由的精确路径。例如：
1
<router-link to="/about" exact>About</router-link>
这将只在当前路径与 “/about” 完全匹配时添加活动类。

总之，<router-link> 是 Vue Router 中的一个非常方便的工具，用于创建路由导航链接，并且它会自动处理路由的匹配和样式切换。

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link><br>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

router-view

<router-view> 是 Vue Router 中的一个重要组件，它用于渲染匹配到的路由组件。在使用 Vue Router 进行单页面应用开发时，你可以在你的应用中使用 <router-view> 标签，它会根据当前路由的路径动态加载对应的组件并渲染在页面上。

以下是 <router-view> 的主要作用和用法：

路由视图渲染：<router-view> 的主要作用是根据当前的路由路径渲染匹配到的路由组件。每当路由发生变化，<router-view> 会自动更新渲染的组件，实现页面内容的切换。
嵌套路由：如果你的应用中使用了嵌套路由，那么 <router-view> 可以在嵌套的组件中嵌套使用。这意味着一个父组件的 <router-view> 可以渲染父级路由的组件，而在子组件中也可以有自己的 <router-view> 渲染子路由的组件。
动态路由：<router-view> 可以与动态路由参数一起使用，根据不同的路由参数加载不同的组件。
命名视图：在某些情况下，你可能需要在同一个路由页面中渲染多个不同的视图，这时可以使用命名视图（named view）。在 <router-view> 上添加 name 属性，然后在路由配置中指定视图的名称，从而让不同的组件在不同的命名视图中渲染。

下面是一个示例，展示了如何在 Vue Router 中使用 <router-view>：

<template>
  <div>
    <h1>My App</h1>
    <!-- 默认的视图 -->
    <router-view></router-view>

    <!-- 命名视图，分别渲染 'sidebar' 和 'main' 视图 -->
    <router-view name="sidebar"></router-view>
    <router-view name="main"></router-view>
  </div>
</template>

路由配置：

const routes = [
  {
    path: '/',
    components: {
      default: Home, // 默认视图渲染 Home 组件
      sidebar: Sidebar, // 命名视图 'sidebar' 渲染 Sidebar 组件
      main: MainContent // 命名视图 'main' 渲染 MainContent 组件
    }
  },
  // 其他路由配置...
]

总之，<router-view> 是 Vue Router 的核心组件之一，用于实现路由导航和页面渲染，使你能够构建动态的单页面应用。

createRouter()

createRouter 是 Vue Router 4 中用于创建路由实例的函数。在 Vue 3 中，Vue Router 进行了一些重大的变化，其中之一就是引入了 createRouter 函数来创建路由实例。

使用 createRouter 函数，你可以创建一个包含路由配置的路由实例，从而定义应用程序的路由规则、导航行为以及视图渲染等。

下面是一个使用 createRouter 的简单示例：


import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  // 更多路由配置...
];

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

export default router;

在上面的示例中：

我们首先导入了 createRouter 和 createWebHistory 函数，它们分别用于创建路由实例和指定路由的模式（在此示例中使用了 HTML5 History 模式）。
我们定义了一个 routes 数组，其中包含了应用程序的路由配置，每个路由对象包括路径（path）和要渲染的组件（component）等信息。
最后，我们使用 createRouter 函数创建了一个路由实例，并传入了路由配置和路由模式。这个路由实例可以在 Vue 应用中使用，用于管理路由的跳转、导航和视图的渲染。

createRouter 是 Vue Router 4 引入的一部分，它更加灵活和模块化，使得在 Vue 3 中构建路由更加简单和可维护。通过创建路由实例并将其与应用程序挂载在一起，你可以实现单页面应用中的导航和路由功能。

history

在 Vue Router 中，history 是一个路由模式的选项，用于指定应该使用哪种路由模式来管理 URL。Vue Router 支持三种主要的路由模式：

Hash 模式（hash）：默认情况下，Vue Router 使用 hash 模式，URL 中会包含一个 # 符号，例如 http://example.com/#/about。这种模式在所有现代浏览器中都能正常工作，且不需要特殊的服务器配置，因此是最简单的一种路由模式。不过，它的 URL 中包含 #，可能不太美观。
History 模式（history）：这种模式使用浏览器的 History API 来管理 URL，因此 URL 不包含 # 符号，例如 http://example.com/about。这样的 URL 更加友好和美观，但需要服务器配置来确保在直接访问这些 URL 时能正确地返回对应的页面。在使用 History 模式时，通常需要在服务器端配置一个回退页面（fallback），以便在找不到对应路由的情况下返回根页面或其他页面，以避免 404 错误。
Abstract 模式（abstract）：这种模式不会改变浏览器的 URL，而是通过程序控制路由状态。通常用于非浏览器环境，比如服务器端渲染（SSR）或桌面应用程序。

app.use(router)

app.use(router) 是 Vue 3 中用于将 Vue Router 路由实例与 Vue 应用关联的方法。当你创建了 Vue Router 路由实例后，需要通过这个方法将它与 Vue 应用整合，以便在应用中使用路由功能。

具体来说，app.use(router) 会做以下几件事情：

它会将路由实例 router 注册到 Vue 3 的应用实例 app 中，使得应用中的其他组件可以访问到路由对象。
它会为应用提供一些全局的方法和属性，例如在组件中可以使用 $router 来访问路由对象，以及在模板中可以使用 <router-view> 来渲染匹配的路由组件。
它会监听浏览器 URL 的变化，根据路由规则执行相应的跳转和组件渲染。

下面是一个简单的示例，展示了如何使用 app.use(router) 集成 Vue Router 到 Vue 3 应用中：

import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  // 更多路由配置...
];

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

const app = createApp(App);

app.use(router); // 将路由实例与应用关联

app.mount('#app');

在上面的示例中，我们首先创建了 Vue 3 的应用实例 app 和 Vue Router 的路由实例 router，然后使用 app.use(router) 将它们关联在一起。这样，我们就可以在应用中使用 Vue Router 提供的路由功能了。

实践案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 路由</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link><br>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

<script>
// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home页面</div>' }
const About = { template: '<div>About页面</div>' }
 
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]
 
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})
 
// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)
 
app.mount('#app')
 
// 现在，应用已经启动了！
</script>
</body>
</html>

参考资料

https://www.runoob.com/vue3/vue3-routing.html