我想添加动态路由并为所有动态路由使用相同的组件。我已尝试使用以下代码来渲染组件,但出现错误:
[vue-router] "path" is required in a route configuration.
添加动态路由并显示相同组件的正确方法是什么?
const Foo = {
template: '<div>Foo</div>'
}
const Home = {
template: '<div>Home</div>'
}
const router = new VueRouter({
mode: 'history',
routes: [{
path: '/',
component: Home
}]
})
const app = new Vue({
router,
el: "#vue-app",
methods: {
viewComponent: function(path, method) {
debugger;
let tf = `${path}/${method}`;
let newRoute = {
path: tf,
name: `${path}_${method}`,
components: {
Foo
},
}
this.$router.addRoute([newRoute])
},
}
});
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85f3f0e0c5b7abb3abb4b1" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="vue-app">
<a v-on:click="viewComponent('api/contact','get')">ddd</a>
<router-view></router-view>
</div>
最佳答案
- 主要问题是您将数组传递给
addRoute
- 第二个问题是路径开头缺少
/
(没有它,您将收到“非嵌套路由必须包含前导斜杠字符”错误) - 最后使用
$router.push
转到新路由
const Foo = {
template: '<div>Foo</div>'
}
const Home = {
template: '<div>Home</div>'
}
const router = new VueRouter({
mode: 'history',
routes: [{
path: '/',
component: Home
}]
})
const app = new Vue({
router,
el: "#vue-app",
methods: {
viewComponent: function(path, method) {
let tf = `/${path}/${method}`;
let newRoute = {
path: tf,
name: `${path}_${method}`,
component: Foo,
}
this.$router.addRoute(newRoute)
this.$router.push({ name: newRoute.name })
},
}
});
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee989b8baedcc0d8c0dfda" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="vue-app">
<a v-on:click="viewComponent('api/contact','get')">ddd</a>
<router-view></router-view>
</div>
关于javascript - 添加新路由时出现错误,路由配置中需要路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68543198/