如何使用 vuejs 3 将路由器添加到 @vue/cli 应用程序?

彼得格罗莫沃

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

vue create myapp

选择 vuejs 3 后,我将 Router 添加到我的项目中,并在我的 src/main.js 中添加了 Router 引用:

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,但我不记得我是否手动创建了...

谢谢!

艾哈迈德·埃姆雷

你需要像这样为vue3安装 vue-router

npm install vue-router@next --save

路由器.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')

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

VueCLI3应用程序(nginx / docker)使用特定于环境的变量

如何将Vuejs组件添加到Laravel Spark应用程序?

如何在没有反应路由器路由器的情况下将活动类添加到 React/Preact 应用程序中的特定部分

如何将Flatpak的应用程序添加到Gnome 3自动启动中?

使用Vuejs和Vuecli构建Chrome扩展

如何将主题添加到应用程序?

如何在vuejs3应用程序设置中调用方法?

将vueJS添加到现有的angular应用程序中

如何将应用程序图标添加到Xamarin Android应用程序

如何将应用程序添加到启动应用程序菜单?

如何在 Laravel 8/Inertia.js/vuejs3 应用程序中创建和使用常用的 mixin?

如何将MySQL连接器添加到UWP C#应用程序?

如何将应用程序添加到GNOME窗口管理器?

如何将侦听器添加到Actor应用程序?

如何将循环选择器添加到Windows Phone 8.1应用程序?

如何从PlayerFramework(Windows应用程序)将ListView添加到播放器?

如何将天气指示器添加到启动应用程序中?

如何将浏览器平台添加到MFP Cordova应用程序?

如何根据正则表达式指定的路径将路由器附加到Express应用程序?

使用 Jetty 服务器将 Spring Cloud sleuth 添加到 Spring 应用程序

如何使用屏幕管理器将 kivy.garden.mapview 添加到 kivy 应用程序中的屏幕

如何将 IActionResultExecutor 服务(如 IActionResultExecutor<NotFoundResult>)添加到基于端点的路由应用程序?

在应用运行时将路由添加到Vue.js路由器

如何在VueJS单页应用程序中添加Matomo跟踪代码?

如何将数据库嵌入我的vuejs应用程序?

Vue JS vuecli3应用程序无法在ie11中运行(贝贝未加载polyfills?)

如何将无线路由器添加到有线路由器?

如何使用 SSO 选项 SAML 将应用程序添加到 Azure AD

如何使用gwt-rpc将HTML / js查询添加到gwt应用程序?