核心步驟：
- 配置路由規(guī)則(router/index.js)
// 1. 導(dǎo)入所需模塊
import Vue from 'vue'
import VueRouter from 'vue-router'
import DisCover from '@/views/DisCover.vue'
import MyMusic from '@/views/MyMusic.vue'
import Follow from '@/views/Follow.vue'
import Recommend from '@/views/Recommend.vue'
import TopList from '@/views/TopList.vue'
import ArtList from '@/views/ArtList.vue'
// 2. 調(diào)用 Vue.use() 函數(shù)，將 VueRouter 安裝為 Vue 的插件
Vue.use(VueRouter)
// 3.配置路由規(guī)則
const routes = [
// 直接寫到這個(gè)數(shù)組中的路由規(guī)則，級(jí)別最大拒逮。叫做一級(jí)路由
// 一級(jí)路由只能展示在App.vue中，所以<router-view/>只能放到App.vue中
{path:'/discover', component: DisCover,children:[
// 二級(jí)路由的path萍程，可以不寫/
// 二級(jí)路由的訪問地址會(huì)和一級(jí)地址拼接
// 比如訪問推薦地址是: /discover/tuijian
{path:'tuijian', component: Recommend},
{path:'toplist', component: TopList},
{path:'artlist', component: ArtList},
]},
{path:'/mymusic', component: MyMusic},
{path:'/follow', component: Follow},
]
// 4. 創(chuàng)建路由的實(shí)例對(duì)象
const router = new VueRouter({
// 路由的配置
routes
})
// 5. 導(dǎo)出路由的實(shí)例對(duì)象
export default router
- 設(shè)置路由出口(router-view/)和設(shè)置超鏈接(<router-link to"/discover/tuijian">)
<template>
<div class="box">
<!-- 發(fā)現(xiàn)音樂 -->
<div class="link">
<router-link to="/discover/tuijian">推薦</router-link>
<router-link to="/discover/toplist">排行榜</router-link>
<router-link to="/discover/artlist">歌手</router-link>
</div>
<div class="content">
<!-- 下面的router-view，用于展示、推薦贷笛、排行榜踏施、歌手組件 -->
<router-view></router-view>
</div>
</div>
</template>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
