Vue Router - 右键单击/在新选项卡中打开

Question

使用 vue-router (4) 我有以下设置

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './methods/routes.js'
import Notifications from '@kyvg/vue3-notification';
import vueTheStorages from 'vue-the-storages';
import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";

const router = createRouter({
    history: createWebHashHistory(),
    base: '/dist/localhost',
    routes: routes.get_routes(),
})

const app = createApp(App);

app.use(router);

当我有类似

的链接时，问题就出现了

<router-link :to="{name: 'events.dashboard', params: { event_id: event.id, date_id: 'next' }} ">
    {{event.title}}
</router-link>

这将创建一个链接

<a href="#/event/2668/next">Event</a>

这很棒，但是如果您右键单击链接并选择

open in new tab

，它将转到

https://example.com/#/event/2668/next

，我需要它才能转到

https://example.com/dashboard/#/event/2668/next

感觉createRouter中应该有一个设置，但我在文档中找不到它

Answer 1

在

createRouter()

可以声明

createWebHashHistory()

。但是你需要声明基本路径，即你需要“#”的地方。

使用示例：

// at https://example.com/folder
createWebHashHistory() // gives a URL of `https://example.com/folder#`
createWebHashHistory('/folder/') // gives a URL of `https://example.com/folder/#`
// if the `#` is provided in the base, it won't be added by `createWebHashHistory`
createWebHashHistory('/folder/#/app/') // gives a URL of `https://example.com/folder/#/app/`
// you should avoid doing this because it changes the original URL and breaks copying urls
createWebHashHistory('/other-folder/') // gives a URL of `https://example.com/other-folder/#`

重要的是，当您“作为 html”运行时，它不起作用：

// at file:///usr/etc/folder/index.html
// for locations with no `host`, the base is ignored
createWebHashHistory('/iAmIgnored') // gives a URL of `file:///usr/etc/folder/index.html#`

用你的代码

const router = createRouter({
    history: createWebHashHistory('/subfolder'), // gives a URL of `http://localhost:1234/subfolder/#` instead of original `http://localhost:1234/#`,
    // base: '/subfolder', // don't need it
    routes: routes.get_routes(),
})

如果您在 DEV 模式和 PROD 模式下需要不同的基本 URL，您可以如下示例所示进行声明：

const router = createRouter({
    history: createWebHashHistory(import.meta.env.DEV ? '/' : '/subfolder'), // gives a URL of `http://example.com/subfolder/#` on PROD mode, and gives a `http://localhost:1234/#` on DEV mode
    // base: '/subfolder', // don't need it
    routes: routes.get_routes(),
})