vue.js - Vue Router * 通配符和正常地址的冲突 ？

Question

Vue Router 的地址配置里面，将 * 作为主页的地址，保证 Nav 会出现在所有页面的顶部，
理论上 地址和 login 平级，login 页面不会渲染 的内容，
现在的问题是：在 login 页面 F5 刷新之后，页面的内容变成 * 的了
以前这个项目都没有这种问题，哪位大佬帮忙看一下？

    // 登录页    path: `/login`    // 主页    path: `*`

Answer 1

const routes = [    // 先定具体路径    { path: '/login', component: Login },    // 其他具体路径...    // 最后定通配符路径    { path: '*', component: Home }];

Answer 2

这是一个很有意思的问题，根据您提供的信息，我可以理解您遇到的问题。在 Vue Router 的地址配置中，将 "*" 作为主页的地址，意味着当用户访问任何页面时，Nav 组件都会出现在所有页面的顶部。然而，在您的登录页面（/login）上，您遇到了一个问题，即使在登录页面刷新后，页面内容仍然变成了主页的内容。

这个问题可能是由于 Vue Router 的路由匹配顺序导致的。在您的配置中，/login 和 "" 的路由配置具有相同的优先级，而 Vue Router 在处理路由时是按照它们在配置中出现的顺序进行的。因此，当您在登录页面刷新后，由于 "" 的路由配置在 "/login" 之前，所以 Vue Router 会优先匹配 "*" 路由，导致页面内容变成了主页的内容。

要解决这个问题，您可以尝试调整路由配置的顺序，将 "/login" 路由配置放在 "*" 之前。这样，当您在登录页面刷新时，Vue Router 将优先匹配 "/login" 路由，从而避免出现内容错误的问题。以下是您可以尝试的修改后的路由配置示例：

// 登录页path: `/login`// 主页path: `*`

希望这个解答能够帮助您解决问题。如果问题仍然存在或者您有其他疑问，请随时向我询问。