文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用vuejs 3向@vue/cli应用程序添加路由器？

问如何使用vuejs 3向@vue/cli应用程序添加路由器？
EN

Stack Overflow用户

提问于 2020-10-31 16:21:46

回答 2查看 6.9K关注 0票数 3

学习vuejs3，我用命令创建了新的@vue/cli应用程序

vue create myapp

在选中vuejs 3之后，我将路由器添加到我的项目中，并在src/main.js中添加了路由器引用：

import { createApp } from 'vue'

import { createRouter/*, createWebHistory */ } from 'vue-router'
import WelcomeScreen from './pages/WelcomeScreen.vue'
import UsersList from './pages/UsersList.vue'

import App from './App.vue'

const router = createRouter({
  // history: createWebHistory(),
  mode: 'history',
  routes: [
    { path: '/', component: WelcomeScreen },
    { path: '/users', component: UsersList }
  ]
})
const app = createApp(App)
app.use(router)

app.mount('#app')

但在控制台上我看到了警告：

"export 'createRouter' was not found in 'vue-router'

和错误：

main.js?56d7:10 Uncaught TypeError: Object(...) is not a function

在我的package.json中有：

  "dependencies": {
    "core-js": "^3.6.5",
    "mitt": "^2.1.0",
    "vue": "^3.0.0",
    "vue-router": "^3.4.8"
  },

和

$ vue --version
@vue/cli 4.5.8

哪条路是有效的？还有一些关于@vue/cli的vuejs3教程吗？我找到了一些vuejs 3教程，但不适合@vue/cli，这会引起一些混乱.

在我的@vue/cli和vue2中，我使用文件src/router/index.js，但是我不记得我是否手动创建了.

谢谢!

vue-router

vuejs3

vue-cli

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-01-03 07:33:17

您需要为vue3安装像这样的vue路由器。

npm install vue-router@next --save

Router.js

import { createApp } from 'vue'
import App from './App.vue'
    import { createRouter, createWebHistory } from "vue-router"
    const routeInfos = [
        {
            path : "/",
            component : HomePage
        },
        {
            path : "/favorites",
            component : FavoritesPage
        }
    ]
    
    const router = createRouter({
        history : createWebHistory(),
        routes : routeInfos
    })
    
    export default router;

在Main.js中导入

import router from "./router"
createApp(App).use(router).mount('#app')

票数 10

Stack Overflow用户

发布于 2022-01-16 10:43:33

我也有同样的问题，找到了答案，这里

//卸载vue2.x vue-路由器

npm uninstall vue-router --save

//安装vue3 vue-路由器

npm install vue-router@next --save

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64623889

复制

相似问题

问如何使用vuejs 3向@vue/cli应用程序添加路由器？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用vuejs 3向@vue/cli应用程序添加路由器？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用vuejs 3向@vue/cli应用程序添加路由器？
EN