VueJS路线未定义

时间:2018-03-12 04:09:09

标签: vue.js vuejs2 vue-component vue-router

我正在尝试在router-view标记内呈现我的vue组件。但它给了我一个错误

  

TypeError:route is undefined

但我没有在任何地方使用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来自哪里。

2 个答案:

答案 0 :(得分:2)

您正在创建路由器实例,如下所示;

const router = new VueRouter({ 
    routes, 
    mode:'history' 
});

但是您应该将router实例注入根vue实例中的路由器选项而不是routes

new Vue({
  el: '#app',
  router,
  //routes, not this
  render: h => h(App)
})

答案 1 :(得分:1)

outerroutes.js

{path:'',component:welcome},

没有任何定义。尝试:

{path:'/',component:welcome},

此外,我不确定您需要routesmain.js周围的大括号:

import {routes} from './outerroutes';