![](/img/trans.png)
[英]Need an example vue-router (vue 2.x) for a Layout.vue with other route based components
[英]How I use vue-router with vue 2.x versions
从'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"
该错误不是 VueRouter 导入错误,而是 VueRouter 使用错误。
VueRouter
function 是获取路由器实例的构造函数。 在您的代码中,您必须这样做才能解决您的问题:
const router = new VueRouter({
routes, // short for `routes: routes`
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.