Question

我可能正在使用一些过时的指南，这可能是它的结果，对Vuejs来说是新的我的 App.vue ：

import Vue from 'vue'
import { App } from './app'
import router from './router'
import store from './store'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})

我的 main.js ：

import Vue from 'vue'
import Router from 'vue-router'
import { routes } from '../app'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: routes
})

路由器/ index.js

import accounts from './accounts'
import budgets from './budgets'
import transactions from './transactions'

export default [...accounts, ...budgets, ...transactions]

然后是 app / routes.js

import * as components from './components'

export default [
  {
    path: '/',
    component: components.AccountsListView,
    name: 'accountsListView' 
  },
  {
    path: '/accounts/create',
    component: components.CreateEditAccounts,
    name: 'createAccounts'
  },
  {
    path: '/accounts/edit',
    component: componenets.CreateEditAccounts,
    name: 'editAccounts'
  }
]

最后， app / accounts / routes.js

localhost:8080/accounts/create

出于某种原因，我无法点击任何组件，例如，如果我转到pluck，那么我最终会使用更改后的网址在索引页面上，而不是点击相应的组件。我正在做的事情有什么明显的错误吗？

Answer 1

<强> main.js：

import Vue from 'vue'
import { App } from './app'
import router from './router'
import store from './store'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

也许您正在使用Vue的仅运行时版本，而模板编译器不可用。

修改＃1

<强> App.vue

<template>
  <div class="App">
      <router-view />
  </div>
</template>

然后，您可能未在router-view组件中加入App。

Answer 2

对于此导出

export default [
  {
    path: '/',
    component: components.AccountsListView,
    name: 'accountsListView' 
  },
  {
    path: '/accounts/create',
    component: components.CreateEditAccounts,
    name: 'createAccounts'
  },
  {
    path: '/accounts/edit',
    component: componenets.CreateEditAccounts,
    name: 'editAccounts'
  }
]

由于routes数组是默认导出，因此您需要使用此导入对象样式导入适用于有多个导出的情况。

import routes from '../app'

参考：MDN web docs - export

Vuejs路由器无法访问任何组件

2 个答案: