suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Javascript – Vue-Routing-Anfängerfragen

1: Ich bin neu bei Vue und weiß nicht viel über Router-Link und Router-View. Die allgemeinen Fragen lauten wie folgt:

Die bestehende Codestruktur ist wie folgt, die links als Navigation und rechts als Anzeigebereich verstanden werden kann

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

Nachdem die Route konfiguriert wurde, kann sie durch Klicken auf den Router-Link effektiv in der Router-Ansicht dargestellt werden.
Aber ich möchte die folgende Struktur.

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

Aber wenn ich zu diesem Zeitpunkt auf „Musik entdecken“ klicke, wird sie nicht in der Router-Ansicht angezeigt.
Ich verstehe das wirklich nicht.

PHP中文网PHP中文网2729 Tage vor877

Antworte allen(3)Ich werde antworten

  • 怪我咯

    怪我咯2017-07-05 10:42:40

    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 }

    Antwort
    0
  • 高洛峰

    高洛峰2017-07-05 10:42:40

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

    Antwort
    0
  • typecho

    typecho2017-07-05 10:42:40

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

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

    Antwort
    0
  • StornierenAntwort