使用vue路由器创建路由

whhtz7ly  于 2022-12-04  发布在  Vue.js
关注(0)|答案(1)|浏览(174)

我有一些问题创建一个路由器使用路由器在vuejs上。我的文件main.js就像下面的代码,然后当我改变添加一些路由,我得到了下面的错误
MAIN.JS之前(运行良好)

import 'bootstrap/dist/css/bootstrap.css'
import { createApp } from 'vue'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
    
import VueRouter from 'vue-router'
import store from './store'
    
createApp(App).use(store).use(router).mount('#app')

主JS之后

import 'bootstrap/dist/css/bootstrap.css'
import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'
import store from './store'

import testeRouter from './pages/testeRouter'

Vue.use(VueRouter)

const router = new VueRouter({
    routers: [
        {
            path: '/pages/testeRouter',
            component: testeRouter
        }
    ]
})

Vue.createApp(App).use(store).use(router).mount('#app')

错误信息

TypeError: Cannot read properties of undefined (reading 'use')

页面不再呈现了。我已经花了一段时间试图修复它。有人知道它可能是什么吗?谢谢

{
  "name": "routing-software",
  "version": "0.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "routing-software",
      "version": "0.1.0",
      "dependencies": {
        "axios": "^0.27.2",
        "bootstrap": "^5.2.1",
        "bootstrap-vue": "^2.22.0",
        "core-js": "^3.8.3",
        "router": "^1.3.7",
        "vue": "^3.2.40",
        "vue-axios": "^3.4.1",
        "vue-router": "^4.0.3",
        "vuex": "^4.0.0"
      },
      "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-plugin-router": "~5.0.0",
        "@vue/cli-plugin-vuex": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.0.3"
      }
},
1mrurvl1

1mrurvl11#

Vue 3没有直接访问use的方法。这就是问题所在。

Vue.use(VueRouter) // this is the issue

这样试试

import 'bootstrap/dist/css/bootstrap.css'
import { createApp } from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

import store from './store'

import testeRouter from './pages/testeRouter'

const router = VueRouter.createRouter({
    routers: [
        {
            path: '/pages/testeRouter',
            component: testeRouter
        }
    ]
})

createApp(App).use(store).use(router).mount('#app')

在此处查看Vue 3路线处理,在此处查看重大变更

相关问题