javascript - vue 路由初學疑問
PHP中文网
PHP中文网 2017-07-05 10:40:40
0
3
807

1:初學vue 對router-link 及 router-view這塊不是特別懂,大致問題如下:

現有程式碼結構如下,可以理解為左邊一個導航,右邊一塊顯示區域

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

設定路由之後,點選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 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>

但這個時候點「發現音樂」 並沒有渲染至router-view,請問這個路由該怎麼改
這塊兒確實不太懂,哪位大神麻煩能給講解講解嗎?

PHP中文网
PHP中文网

认证0级讲师

全部回覆(3)
刘奇

router.js應該這樣寫吧
//router.js
Vue.use(Router)
import foundMusic from "../compontents/found_music.vue"
export default new Router({
rou

routes:[

tes

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

})

你試試看 components:{ "left-menu":leftMenu }🎜
小葫芦

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

typecho

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

//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.js
import 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 = axios
Vue.prototype.MUSICAPI = '/api'

Vue.use(VueRouter)
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
//router.js
import 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 id="music_content" 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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!