javascript - vue 路由初学疑问

问题描述

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

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

//content.vue<p class = 'row'> <p 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 ></i> MV</li></ul> </p> <router-view class='router-view col-md-10'></router-view></p>//router.jsimport foundMusic from '../compontents/found_music.vue'routes:[ {path:'/foundMusic',component: foundMusic }]

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

<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 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 ></i> MV</li> </ul> </p></template>

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

问题解答

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

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

]

})

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

看下命名视图 https://router.vuejs.org/zh-c...

我在重新对逻辑进行审查之后发现正常了，下面把正常的代码贴一遍吧，也算是帮助新人了。在此非常感谢回答问题的朋友

//App.vue<template> <p id = 'app'> <music-nav></music-nav> <music-content></music-content> <music-playing-wapper></music-playing-wapper> </p></template><script> import musicNav from './nav.vue' import musicContent from './music_content.vue' import musicPlayingWapper from './playing_wapper.vue' export default {name:’app’,components:{ musicNav, musicContent, musicPlayingWapper} }</script>//main.jsimport Vue from ’vue’import App from ’./App.vue’import VueRouter from ’vue-router’import axios from ’axios’import router from ’./router/router’Vue.prototype.axios = axiosVue.prototype.MUSICAPI = ’/api’Vue.use(VueRouter)new Vue({ el: ’#app’, router, render: h => h(App)})//router.jsimport Router from 'vue-router'import content from '../music_content.vue'import foundMusic from '../compontents/found_music.vue'import App from '../compontents/found_music.vue'export default new Router({ routes:[{ path:'/foundMusic', component: foundMusic} ] });//music_content.vue<template> <p class = 'container-fluid'> <p class = 'row'> <left-menu></left-menu> <router-view class='router-view col-md-10'></router-view> </p> </p></template><script>import leftMenu from ’./menu_content/left_menu.vue’export default { name: ’musicContent’, components:{ leftMenu }}</script>