1: I am new to Vue and I don’t know much about router-link and router-view. The general questions are as follows:
The existing code structure is as follows, which can be understood as a navigation on the left and a display area on the right
//content.vue
<p class = "row">
<p id="music_left_menu" class = "col-md-2">
<h4>推荐</h4>
<ul class="list-group">
<li><i class = "fa fa-music"></i><router-link to = "/foundMusic">发现音乐</router-link> </li>
<li><i class = "fa fa-bullhorn"></i> 私人FM</li>
<li><i class = "fa fa-youtube-play" ></i> MV</li>
</ul>
</p>
<router-view class="router-view col-md-10"></router-view>
</p>
//router.js
import foundMusic from "../compontents/found_music.vue"
routes:[
{
path:"/foundMusic",
component: foundMusic
}
] After configuring the route, clicking the router-link can effectively render it into the router-view
But what I want is the following structure
<p class = "row">
<left-menu></left-menu>
<router-view class="router-view col-md-10"></router-view>
</p>
import leftMenu from './menu_content/left_menu.vue'
export default {
name: 'musicContent',
components:{
leftMenu
}
}
//left_menu.vue 中的结构如下
<template>
<p id="music_left_menu" class = "col-md-2">
<h4>推荐</h4>
<ul class="list-group">
<li><i class = "fa fa-music"></i><router-link to = "/foundMusic">发现音乐</router-link> </li>
<li><i class = "fa fa-bullhorn"></i> 私人FM</li>
<li><i class = "fa fa-youtube-play" ></i> MV</li>
</ul>
</p>
</template>
But at this time, clicking "Discover Music" does not render to the router-view. How should I change this route?
I really don't understand this. Can any expert please explain it?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
router.js should be written like this
//router.js
Vue.use(Router)
import foundMusic from "../components/found_music.vue"
export default new Router({
routes:[
]
})
You try components:{ "left-menu":leftMenu }
Look at the named view https://router.vuejs.org/zh-c...
After re-examining the logic, I found that it is normal. I will post the normal code below, which can be regarded as helping newcomers. Thank you very much to those who answered the question