大家好，我是讯享网，很高兴认识大家。



在你的组件中使用 或 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。虽然这不一定是件坏事，但我们可以通过 配置来解除这种行为：

回到我们之前的示例：

和：

我们可以通过声明 prop 来在 中删除对 的直接依赖：

然后我们可以通过设置 来配置路由将 参数作为 prop 传递给组件：

这允许你在任何地方使用该组件，使得该组件更容易重用和测试。

当 设置为 时， 将被设置为组件的 props。

对于有命名视图的路由，你必须为每个命名视图定义 配置：

当 是一个对象时，它将原样设置为组件 props。当 props 是静态的时候很有用。

你可以创建一个返回 props 的函数。这允许你将参数转换为其他类型，将静态值与基于路由的值相结合等等。

URL 将传递 作为 props 传给 组件。

请尽可能保持 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 vue 才可以对状态变化做出反应。

你还可以通过 插槽 传递任意参数：

It‘s common for applications to have a navigation component that renders a list of RouterLink components. Within that list, we might want to style links to the currently active route differently from the others.

The RouterLink component adds two CSS classes to active links, and . To understand the difference between them, we first need to consider how Vue Router decides that a link is active.

A RouterLink is considered to be active if:

讯享网

1. It matches the same route record (i.e. configured route) as the current location.
2. It has the same values for the as the current location.

If you’re using nested routes, any links to ancestor routes will also be considered active if the relevant match.

Other route properties, such as the , are not taken into account.

The path doesn‘t necessarily need to be a perfect match. For example, using an would still be considered a match, so long as it resolves to the same route record and .

If a route has a , it won’t be followed when checking whether a link is active.

An exact match does not include ancestor routes.

Let‘s imagine we have the following routes:

Then consider these two links:

If the current location path is then these would both be considered active, so the class would be applied to both links. But only the second link would be considered exact, so only that second link would have the class .

The RouterLink component has two props, and , that can be used to change the names of the classes that are applied:

The default class names can also be changed globally by passing the and options to :

See Extending RouterLink for more advanced customization techniques using the API.

在创建路由器实例时， 配置允许我们在不同的历史模式中进行选择。

hash 模式是用 创建的：

它在内部传递的实际 URL 之前使用了一个哈希字符（）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有不好的影响。如果你担心这个问题，可以使用 HTML5 模式。

Memory 模式不会假定自己处于浏览器环境，因此不会与 URL 交互也不会自动触发初始导航。这使得它非常适合 Node 环境和 SSR。它是用 创建的，并且需要你在调用 之后手动 push 到初始导航。

虽然不推荐，你仍可以在浏览器应用程序中使用此模式，但请注意它不会有历史记录，这意味着你无法后退或前进。

用 创建 HTML5 模式，推荐使用这个模式：

当使用这种历史模式时，URL 会看起来很 "正常"，例如 。漂亮!

不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 ，就会得到一个 404 错误。这就尴尬了。

不用担心：要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 相同的页面。漂亮依旧!

注意：以下示例假定你正在从根目录提供服务。如果你部署到子目录，你应该使用Vue CLI 的 配置和相关的路由器的 属性。你还需要调整下面的例子，以使用子目录而不是根目录（例如，将 替换为 ）。

也可以使用 代替 。

对于 Node.js/Express，可以考虑使用 connect-history-api-fallback 中间件。

1. 安装 IIS UrlRewrite
2. 在网站的根目录下创建一个 文件，内容如下：

将此添加到你的 中：

创建一个 文件，包含在你的部署文件中：

在 vue-cli、nuxt 和 vite 项目中，这个文件通常放在名为 或 的目录下。

你可以在 Netlify 文档中找到更多关于语法的信息。你也可以创建一个 来结合其他 Netlify 功能的重定向。

在项目根目录创建一个文件，内容如下：

这有一个注意事项。你的服务器将不再报告 404 错误，因为现在所有未找到的路径都会显示你的 文件。为了解决这个问题，你应该在你的 Vue 应用程序中实现一个万能的路由来显示 404 页面。

另外，如果你使用的是 Node.js 服务器，你可以通过在服务器端使用路由器来匹配传入的 URL，如果没有匹配到路由，则用 404 来响应，从而实现回退。查看 Vue 服务器端渲染文档了解更多信息。