久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術文章
文章詳情頁

javascript - vue 路由初學疑問

瀏覽:142日期:2023-04-05 08:35:33

問題描述

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,請問這個路由該怎么改這塊兒確實不太懂,哪位大神麻煩能給講解講解嗎?

問題解答

回答1:

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 }

回答2:

看下命名視圖 https://router.vuejs.org/zh-c...

回答3:

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

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

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 巴东县| 巴中市| 沙洋县| 米林县| 阜城县| 江源县| 临颍县| 大英县| 义乌市| 阜新市| 绥芬河市| 上栗县| 肃宁县| 北碚区| 固始县| 广宗县| 凤冈县| 宜春市| 高碑店市| 柘荣县| 溧水县| 深泽县| 德昌县| 秦皇岛市| 淅川县| 德令哈市| 穆棱市| 绥芬河市| 鄱阳县| 绩溪县| 个旧市| 无锡市| 青龙| 靖江市| 广灵县| 连州市| SHOW| 观塘区| 班戈县| 广宁县| 鹿邑县|