2023.10.3日报

npm install vue-router@3 ---用于vue2 npm install vue-router@4 ---用于vue3 vue-router主要是用于跳转

copy

<template>
<!--  <div id="app">-->
<!--    <img alt="Vue logo" src="./assets/logo.png">-->
<!--    <Movie v-for="movie in movies":key="movie.id":title="movie.title":rating="movie.rating"></Movie>-->
<!--    <Hello ></Hello>-->
<!--    <Hello2></Hello2>-->
<!--  </div>-->

  <div>
    <h1>APP组件</h1>
    <router-link to="/discover">发现音乐</router-link>
    <router-link to="/my">我的音乐</router-link>
    <router-link to="/friends">关注</router-link>
    <router-view></router-view>
  </div>
</template>

 

copy

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from "axios";
import router from './router/index.js'
axios.defaults.baseURL = "http://localhost:8088"
Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

index.js，用于设置路由关系

copy

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(
    {
        routes:[
            {path :'/',redirect:"/discover"},
            {path :'/discover',component:Discover,
            children:[
                {path:"toplist",component:Toplist},
                {path:"playlist",component:Playlist},
            ]
            },
            {path :'/friends',component:Friends},
            {path :'/my',component:My},
        ]
    })
export default router

其中，Discover.vue是嵌套了内容

copy

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