[英]Vuejs router cant reach any components
我可能正在使用一些过时的指南,这可能是Vuejs的新指南。
我的App.vue :
<template>
<div id="app">
<img src="../assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
我的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,
template: '<App/>',
components: { App }
})
路由器/ index.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
})
然后是app / routes.js
import accounts from './accounts'
import budgets from './budgets'
import transactions from './transactions'
export default [...accounts, ...budgets, ...transactions]
最后, app / accounts / 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'
}
]
出于某种原因,我无法点击任何组件,例如,如果我转到localhost:8080/accounts/create
则最终我将使用更改后的URL进入索引页面,而不是点击相应的组件。 我的工作明显有什么问题吗?
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>
然后,也许您没有在您的App
组件中包含router-view
。
对于此出口
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网站文档-导出
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.