路由更改时清除URL

Question

我有一个Vue应用程序，里面有这个路由器文件：

const routes = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{ path: '', component: () => import('pages/IndexPage.vue') },
{ path: '/contacts', component: () => import('pages/ContactsPage.vue') },
{ path: '/settings', component: () => import('pages/GeneralSettings.vue') },
]
},
{
path: '/:catchAll(.*)*',
component: () => import('pages/ErrorNotFound.vue')
}
]    
export default routes

在IndexPage中，我创建了这个方法来显示URL中的id，所以我以后可以使用它：

const setURL = (item: Store) => {
const searchURL = new URL(window.location.toString());
searchURL.searchParams.set('itemid', item.id);
window.history.pushState({}, '', searchURL);      
}

这个方法工作得很好，但当我尝试打开例如：联系人页面时，URL看起来像这样：

http://localhost:8080/?itemid=1#/contacts

这不起作用，因为URL应该如下：http://localhost:8080/#/contacts

单击链接时有没有办法删除itemid？我使用的是Quasar和composition api。

Answer 1

我认为主要问题在于setUrl函数。

在使用vue路由器时，我建议你尽量不要手动干扰url。

如果您想在不刷新页面的情况下向url添加查询，可以使用router.replace()方法。

import { useRouter } from "vue-router"
const router = useRouter()
const setURL = (item: Store) => {
router.replace({ query: { itemId: item.id } })      
}

以这种方式编辑路线时，它们应该可以正常工作。