VUE框架使用vue-router实现两层嵌套效果的实现------VUE框架

待我称王封你为后i 2024-02-26 00:53 102阅读 0赞

>     <template>
>         <div>
>             <h1>发现音乐</h1>
>             <router-link to="/discover/toplist">推荐</router-link>
>             <router-link to="/discover/playlist">歌单</router-link>
>             <hr>
>             <router-view></router-view>
>         </div>
>     </template>
> 
> <template>
> 
> <div>
> 
> <h1>发现音乐</h1>
> 
> <router-link to="/discover/toplist">推荐</router-link>
> 
> <router-link to="/discover/playlist">歌单</router-link>
> 
> <hr>
> 
> <router-view></router-view>
> 
> </div>
> 
> </template>

>     <template>
>         <h3>推荐</h3>
>     </template>
> 
> <template>
> 
> <h3>推荐</h3>
> 
> </template>

>     <template>
>         <h3>歌单</h3>
>     </template>
> 
> <template>
> 
> <h3>歌单</h3>
> 
> </template>

>     import VueRouter from "vue-router";
>     import Vue from "vue";
>     import Discover from "../components/Discover.vue"
>     import Friends from "../components/Friends.vue"
>     import My from "../components/My.vue"
>     import PlayList from "../components/PlayList.vue";
>     import TopList from "../components/TopList.vue";
>     
>     Vue.use(VueRouter)
>     
>     const router = new VueRouter({
>         //指定hash属性和组件的对应关系
>         routes:[
>             { path : '/',redirect:'/discover'},
>             { path : '/discover', component: Discover,
>             children:[
>                 { path : 'playlist', component: PlayList},
>                 { path : 'toplist', component: TopList}
>             ]
>             },
>             { path : '/friend', component: Friends},
>             { path : '/my', component: My},
>             
>         ]
>     })
>     
>     export default router
> 
> import VueRouter from "vue-router";
> 
> import Vue from "vue";
> 
> import Discover from "../components/Discover.vue"
> 
> import Friends from "../components/Friends.vue"
> 
> import My from "../components/My.vue"
> 
> import PlayList from "../components/PlayList.vue";
> 
> import TopList from "../components/TopList.vue";
> 
> Vue.use(VueRouter)
> 
> const router = new VueRouter(\{
> 
> //指定hash属性和组件的对应关系
> 
> routes:\[
> 
> \{ path : '/',redirect:'/discover'\},
> 
> \{ path : '/discover', component: Discover,
> 
> children:\[
> 
> \{ path : 'playlist', component: PlayList\},
> 
> \{ path : 'toplist', component: TopList\}
> 
> \]
> 
> \},
> 
> \{ path : '/friend', component: Friends\},
> 
> \{ path : '/my', component: My\},
> 
> \]
> 
> \})
> 
> export default router