VueJS 路由未定义
Posted
技术标签:
【中文标题】VueJS 路由未定义【英文标题】:VueJS route is undefined 【发布时间】:2018-08-20 01:10:22 【问题描述】:我正在尝试在 router-view
标记内呈现我的 vue 组件。但它给了我一个错误
TypeError: 路由未定义
但我没有在任何地方使用route
这个词。这是我的代码。
App.vue
<template>
<div id="app">
<my-header></my-header>
<router-view></router-view>
<my-footer></my-footer>
</div>
</template>
outerroutes.js
import welcome from './components/welcome.vue';
import insideSystem from './components/insideSystem.vue';
import forgotPassword from './components/forgotPassword.vue';
export const routes = [
path:'',component:welcome,
path:'/insideSystem',component:insideSystem,
path:'/forgotPassword',component:forgotPassword
];
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routes from './outerroutes';
Vue.use(VueRouter);
const router = new VueRouter(
routes,
mode:'history'
);
new Vue(
el: '#app',
routes,
render: h => h(App)
)
我想知道这个route
是从哪里来的。
【问题讨论】:
【参考方案1】:您正在创建一个路由器实例,如下所示;
const router = new VueRouter(
routes,
mode:'history'
);
但是你应该将router
实例注入到根vue实例中的router选项而不是routes
new Vue(
el: '#app',
router,
//routes, not this
render: h => h(App)
)
【讨论】:
【参考方案2】:在outerroutes.js
:
path:'',component:welcome,
没有任何定义。试试:
path:'/',component:welcome,
此外,我不确定您是否需要 routes
周围的花括号 main.js
at:
import routes from './outerroutes';
【讨论】:
另外,route
指的是outerroutes.js
中routes
常量的元素之一。
我的意思是 set path:'/',component:welcome 默认加载欢迎组件并通过编程导航加载其他组件。但是在我设置 path:'/welcome',component:welcome 后给了我同样的错误。
您是否尝试从 main.js
的导入中删除花括号?
设置文件名有什么限制吗? (明智地插入了outerroutes.js route.js)
不,你可以传入任何文件名,只要它存在。我查看了我的一个项目,发现可能是问题所在。尝试从 outerroutes.js
文件中导入 vue 路由器:import Vue from 'vue'
import VueRouter from 'vue-router'
然后,导出路由器的实例: Vue.use(VueRouter) export default new VueRouter( mode: 'history', routes: [路径:'/',组件:欢迎 ];以上是关于VueJS 路由未定义的主要内容,如果未能解决你的问题,请参考以下文章
VueJS 3 / 路由器 / 带有推送的重定向:未捕获(承诺中)类型错误:无法读取未定义的属性(读取“推送”)
Vue路由器错误:TypeError:无法读取未定义的属性“匹配”
未捕获的 ReferenceError: $ 未定义 (VueJS)