我正在关注官方示例,但我不知道为什么我会得到一个带有此js错误的空白页面
vue-router.esm.js?fe87:10 未捕获错误:[vue-router] 路由配置中需要“路径”。
这是我的两页:
/:language/bar /:language/foo
+------------------+ +-----------------+
| +---------+ | | +---------+ |
| | header | | | | header | |
| +---------+ | | +---------+ |
| +--------------+ | | +-------------+ |
| | bar | | +------------> | | foo | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
这就是我正在尝试做的事情。
我的入口点js文件:
import Vue from 'vue';
import router from './router';
// import some components
let vm = new Vue({
el: '#app',
router,
components: {/*imported components*/},
});
vm.$language.current = vm.$route.params.language;
我的入口点 html
<body>
<div id="app">
<!-- this is the header, the common part -->
<navbar fullname=''></navbar>
<router-view></router-view>
</div>
</body>
我的路由器
import Vue from 'vue';
import Router from 'vue-router';
// import foo and bar components
Vue.use(Router);
let routes = [
{
path: '/:language',
name: 'homepage',
children: [
{
path: 'foo',
component: Foo
},
{
path: 'bar',
component: Bar
},
]
}
];
export default new Router({routes,});
我的 foo 组件
<template>
<div>
<h1>FOO</h1>
</div>
</template>
<script>export default {};</script>
如何修复此错误?
您还应该为父级添加一个组件。
面临同样的问题,但就我而言:
路由器/index.js
import config from '@common/src/config'
...
...
{
path: config.mobile_search,
name: 'search',
component: MobileSearch
}
mobile_search 配置文件中缺少路径。
因此请确保您添加了正确的路径。
注意: 1.组件尝试使用本地注册 2. 对于嵌套路由器:
const router = new VueRouter({
routes: [
{ path: '/language/:id',
component: language,
children: [
{
// Bar will be rendered inside language's <router-view>
// when /language/:id/bar is matched
path: 'bar',
component: Bar
},
{
// Foo will be rendered inside language's <router-view>
// when /language/:id/foo is matched
path: 'foo',
component: Foo
}
]
}
]
})
export default {
name: "Foo"
};