在 vue js 中导入和导出变量

Question

有什么方法可以将这个 routes 变量 导入另一个文件。注意我不想导入路由器只是路由变量。 下面的代码是我试图做的

src/router.js

const routes = [
{
    path:"/",
    name:"home",
    component: HomeTemplate
},
{
    path:"/heroes",
    name:"heroes",
    component: /*webpackChunkName: Heroes*/ import("@/components/DcHeroes/DcHeroes")
},
{
    path:"/calendar",
    name:"calendar",
    component: /*webpackChunkName: Calendar*/ import("@/components/CalendarTemplate")
},
{
    path:"/markdown",
    name:"markdown",
    component: /*webpackChunkName: Markdown*/ import("@/components/MarkDownTemplate")
},
]
const router = createRouter({
    history:createWebHistory(),
    routes,
    base:'/'
})
export default router;

src/components/navbar/index.vue

<template>
    <div>
        <h2>Navbar</h2>
        <router-link :to="{ name:'home', }">Home</router-link>
        <router-link :to="{ name:'heroes', }">Heroes</router-link>
        <router-link :to="{ name:'calendar', }">Calendar</router-link>
        <router-link :to="{ name:'markdown', }">MarkDown</router-link>
    </div>
</template>
<script>
        import routes from '@/Router.js'
        export default{
            name: "NavbarTemplate",
            mounted(){
                console.log(routes);
            }
        }
</script>

//import {routes} from '@/Router.js'
// This returns a large object

谢谢。

Answer 1

你可以使用export const routeslike

export const routes = [
{
    path:"/",
    name:"home",
    component: HomeTemplate
},
...
]

然后像这样导入它：

 import { routes } from '@/Router.js'

或者您可以使用this.$router.getRoutes() 方法访问该路由：

<script>
    
        export default{
            name: "NavbarTemplate",
            mounted(){
                console.log(this.$router.getRoutes());
            }
        }
</script>