我如何在 vue 2.x 版本中使用 vue-router

Question

從'vue'導入Vue 從'vuex'導入Vuex 從'vue-router'導入VueRouter 導入'es6-promise/auto'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'

//import About from "./components/About.vue"

Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(Vuex)
Vue.use(VueRouter)

const store = new Vuex.Store({ ... })

const routes = [
  { path: '/about', component: { template: '<div>foo</div>' } },
]

const router = VueRouter({
  routes, // short for `routes: routes`
})

new Vue({
  render: h => h(App),
  router,
  store,
}).$mount('#app')

我嘗試使用路由器，但它在下面給出錯誤：

Uncaught TypeError: this is undefined
    VueRouter vue-router.esm.js:2699
    <anonymous> main.js:84
    js app.js:1351
    __webpack_require__ app.js:849
    fn app.js:151
    1 app.js:1364
    __webpack_require__ app.js:849
    checkDeferredModules app.js:46
    <anonymous> app.js:925
    <anonymous> app.js:928
vue-router.esm.js:2699
    VueRouter vue-router.esm.js:2699
    <anonim> main.js:84
    js app.js:1351
    __webpack_require__ app.js:849
    fn app.js:151
    1 app.js:1364
    __webpack_require__ app.js:849
    checkDeferredModules app.js:46
    <anonim> app.js:925
    <anonim> app.js:928

我創建了我的項目 vue cli，然后我使用 npm -i 安裝了 vue-router，為什么它不能以這種方式工作，或者我應該使用vue add router cli 命令添加？

這是我的版本：

    "vue": "^2.6.12",
    "vue-router": "^3.2.0",
    "vuex": "^3.6.2"
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.11",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"

Answer 1

該錯誤不是 VueRouter 導入錯誤，而是 VueRouter 使用錯誤。

VueRouter function 是獲取路由器實例的構造函數。 在您的代碼中，您必須這樣做才能解決您的問題：

const router = new VueRouter({
  routes, // short for `routes: routes`
})