如何使用 vuejs 3 将路由器添加到 @vue/cli 应用程序? [英] How to add Router to @vue/cli app with vuejs 3?
问题描述
学习 vuejs3 我用命令创建了新的@vue/cli 应用
Learning vuejs3 I created new @vue/cli app with command
vue create myapp
选择了 vuejs 3我在我的项目中添加了 Router 并在我的 src/main.js 中添加了 Router 引用:
with vuejs 3 selected I added Router to my project and added Router reference in my 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')
但在控制台中我看到警告:
But In the console I see warning :
"export 'createRouter' was not found in 'vue-router'
和错误:
main.js?56d7:10 Uncaught TypeError: Object(...) is not a function
在我的 package.json 中有:
In my package.json I have :
"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 的,这引起了一些混乱...
Which way is valid? Also are some some vuejs3 tutorials for @vue/cli? I found some vuejs 3 tutorials, but not for @vue/cli and that raise some confusion...
在我的@vue/cli 和 vue2 中说我使用文件 src/router/index.js,但我不记得是否我已经手动创建...
Say in my @vue/cli with vue2 I use file src/router/index.js, but I do not remember if I have created manually...
谢谢!
推荐答案
你需要像这样为vue3安装vue-router:
You need install vue-router like this for vue3:
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 In Main.js
import router from "./router"
createApp(App).use(router).mount('#app')
这篇关于如何使用 vuejs 3 将路由器添加到 @vue/cli 应用程序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!