如何替换Vuejs路由器中的path ?

Question

Bar在导航栏中，因此可以从任何路径单击。当我单击它时，bar/:lang/:someId连接到前面的路径。作为一个例子，我得到foo2/bar/en/223344作为路径。我怎么能管理它得到确切的bar/:lang/:someId路径?

routes = [
{
path: '',
name: 'home'
},
{
path: 'foo',
component: () => {'@/views/Foo.vue'},
children: [
{
path: 'bar/:lang/:someId',
name: 'bar',
component: () => {'@/views/Bar.vue'}
}
]
},
{
path: 'foo2',
component: () => {'@/views/Foo2.vue'},
children: [
{
path: 'bar2/:lang/:someId',
name: 'bar2',
component: () => {'@/views/Bar2.vue'}
}
]
}
]

var app = new Vue({
el: '#app',
methods: {
goTo(lang, id) {
this.$router.push({
path: `bar/${lang}/${id}`
})
}
}
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
<div @click="goTo('en', '223344')">Go to page</div>
</div>

Answer 1

将主路径从空字符串替换为斜杠'/'，并将所有嵌套路由放在父路由的子路由中。它应该看起来像这样:

routes = [ { path: '/', name: 'home', children: [ ...your routes ] } ]