問題描述

1：初學(xué)vue 對router-link 及 router-view這塊不是特別懂，大致問題如下：

現(xiàn)有代碼結(jié)構(gòu)如下，可以理解為左邊一個(gè)導(dǎo)航，右邊一塊顯示區(qū)域

//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'>發(fā)現(xiàn)音樂</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 }]

配置路由之后，點(diǎn)擊router-link可以有效渲染至router-view中但是我本身想要的是如下結(jié)構(gòu)

<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 中的結(jié)構(gòu)如下<template> <p class = 'col-md-2'> <h4>推薦</h4> <ul class='list-group'><li><i class = 'fa fa-music'></i><router-link to = '/foundMusic'>發(fā)現(xiàn)音樂</router-link> </li><li><i class = 'fa fa-bullhorn'></i> 私人FM</li><li><i ></i> MV</li> </ul> </p></template>

但這個(gè)時(shí)候點(diǎn)“發(fā)現(xiàn)音樂” 并沒有渲染至router-view，請問這個(gè)路由該怎么改這塊兒確實(shí)不太懂，哪位大神麻煩能給講解講解嗎？

問題解答

router.js應(yīng)該這樣寫吧//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...

我在重新對邏輯進(jìn)行審查之后發(fā)現(xiàn)正常了，下面把正常的代碼貼一遍吧，也算是幫助新人了。在此非常感謝回答問題的朋友

//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>