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

];

ma​​in.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.jsroutes 常量的元素之一。 我的意思是 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路由器查看反应道具未定义

VueJS 3 / 路由器 / 带有推送的重定向:未捕获(承诺中)类型错误:无法读取未定义的属性(读取“推送”)

Vue路由器错误:TypeError:无法读取未定义的属性“匹配”

未捕获的 ReferenceError: $ 未定义 (VueJS)

VueJS:未捕获(承诺中)TypeError:无法读取未定义的属性“推送”

VueJS 3 + Laravel:未捕获的类型错误:无法读取未定义的属性“组件”