我有两个组件 - 'HelloIndex' 和 'HelloShow'。
问题是当我尝试这样做时
this.$router.push({name: 'HelloShow', params: {id: 1}})
,然后加载 'HelloIndex' 组件而不是 'HelloShow'。在我的路由器中:
import Vue from 'vue'
import Router from 'vue-router'
import HelloIndex from '@/components/HelloIndex'
import HelloShow from '@/components/HelloShow'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/index',
name: 'HelloIndex',
component: HelloIndex,
children: [
{
path: ':id/show',
name: 'HelloShow',
component: HelloShow
}
]
}
]
})
你好索引.vue:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'helloIndex',
data () {
return {
msg: 'INDEX'
}
}
}
</script>
HelloShow.vue:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'helloShow',
data () {
return {
msg: 'SHOW'
}
}
}
</script>
应用程序视图
<template>
<div id="app">
<button @click="show">show</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
methods: {
show () {
this.$router.push({name: 'HelloShow', params: {id: 1}})
}
}
}
</script>
主文件
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
组件名称有什么问题?
具有子组件的父组件应包含<router-view></router-view>
在<template>
标签中。您的HelloIndex.vue
文件可能如下所示:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'helloIndex',
data () {
return {
msg: 'INDEX'
}
}
}
</script>
如果你想在同一水平两个组件,所以HelloShow
不会是一个孩子HelloIndex
,你可能要编辑您的路线。
export default new Router({
routes: [
{
path: '/index',
name: 'HelloIndex',
component: HelloIndex
},
{
path: ':id/show',
name: 'HelloShow',
component: HelloShow
}
]
})
有关此主题的更多信息可以在文档中找到vue-router
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句