javascript - vue 路由初学疑问

问题描述

问 题

1：初学vue 对router-link 及 router-view这块不是特别懂，大致问题如下：

现有代码结构如下，可以理解为左边一个导航，右边一块显示区域

//content.vue
<div class = "row">
    <div 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>
     </div>
     <router-view class="router-view col-md-10"></router-view>
</div>

//router.js
import foundMusic from "../compontents/found_music.vue"
routes:[
    {
        path:"/foundMusic",
        component: foundMusic
    }
] 

配置路由之后，点击router-link可以有效渲染至router-view中
但是我本身想要的是如下结构

<div class = "row">
    <left-menu></left-menu>
     <router-view class="router-view col-md-10"></router-view>
</div>

import leftMenu from './menu_content/left_menu.vue'
export default {
  name: 'musicContent',
  components:{
      leftMenu
  }
}
//left_menu.vue 中的结构如下
<template>
  <div 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>
  </div>
</template>

但这个时候点发现音乐 并没有渲染至router-view，请问这个路由该怎么改
这块儿确实不太懂，哪位大神麻烦能给讲解讲解吗？

解决方案

router.js应该这样写吧
//router.js
Vue.use(Router)
import foundMusic from "../compontents/found_music.vue"
export default new Router({
routes:[

{
    path:"/foundMusic",
    component: foundMusic
}

]

})

你试一下 components:{ "left-menu":leftMenu }

这篇关于javascript - vue 路由初学疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！