如何在vuex商店上直接更改路由器(使用组合API)

Question

我在商店里尝试的东西：

import router from 'vue-router'
export function router ({ commit, getters, dispatch }, payload) {
console.log('test:', router)
router.push({ path: '/admin/products' })
}

但它返回路由器"未定义"。

在组合api存储中导入路由器的正确方法是什么？

我知道我可以通过导入路由器

从'../..导入路由器/路由器

但是。。。如何应用路由器更改？因为它导入了我所有的路由器文件。

这是我的路由器index.js文件：

const routes = [
{
path: '/',
component: () => import('layouts/client.vue'),
children: [
{ path: '', component: () => import('pages/client/Index.vue') }
]
},
{
path: '/admin',
component: () => import('layouts/admin.vue'),
children: [
{ path: '', component: () => import('pages/admin/Index.vue') }
]
},
{
path: '/admin/products',
component: () => import('layouts/admin.vue'),
children: [
{ path: '', component: () => import('pages/admin/Products.vue') }
]
},
{
path: '/admin/vendas',
component: () => import('layouts/admin.vue'),
children: [
{ path: '', component: () => import('pages/admin/CheckoutPurchases.vue') }
]
},
{
path: '/admin/products/createProduct',
component: () => import('layouts/admin.vue'),
children: [
{ path: '', component: () => import('pages/admin/CreateProduct.vue') }
]
},
{
path: '/checkout',
component: () => import('layouts/checkout.vue'),
children: [
{ path: '', component: () => import('pages/checkout/Index.vue') }
]
},
{
path: '/membro/:id',
// beforeEnter: (to, from, next) => AuthGuard(to, from, next, store),
component: () => import('layouts/basic.vue'),
children: [
{ path: '', component: () => import('pages/checkout/CheckoutMember.vue') }
]
},
{
path: '/adminlogin',
// beforeEnter: (to, from, next) => AuthGuard(to, from, next, store),
component: () => import('layouts/basic.vue'),
children: [
{ path: '', component: () => import('pages/admin/Adminlogin.vue') }
]
},
// {
//   path: '/productMember',
//   component: () => import('layouts/basic.vue'),
//   children: [
//     { path: '', component: () => import('pages/checkout/Memberlogin.vue') }
//   ]
// },
{
path: '/obrigado/:id',
component: () => import('layouts/checkout.vue'),
children: [
{ path: '', component: () => import('pages/checkout/Thanks.vue') }
]
},
{
path: '/checkout/:user/:product',
component: () => import('layouts/checkout.vue'),
children: [
{ path: '', component: () => import('pages/checkout/Index.vue') }
]
},
// Always leave this as last one,
// but you can also remove it
{
path: '/:catchAll(.*)*',
component: () => import('pages/Error404.vue')
}
]
export default routes

Answer 1

从您实现它的实际.js文件中导入它，而不是从节点包中导入，它应该可以在中工作

import router from '.../router.js'

Answer 2

在vue3中，您应该像这样导入路由器：

import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
// console.log(router) within onMounted() and you could find all routes is
// in router.option.routes
// redirect to homepage with query parameters
router.push('/home', { id: 'xxxx' }) 
}
}

在您的router/index.js中，不要忘记添加以下内容：

// add this below your routes array.
const router = createRouter({
history: createWebHashHistory(), // url with # tag. You can also try the other
routes: routes
})
// and export this router, not routes
export default router

在main.js 中

import { createApp } from 'vue
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app.use(router)