新建vue项目
main.js
import Vue from 'vue'
import App from './App.vue'
import router from "@/router";
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router
}).$mount('#app');app.vue
<template>
<div id="app">
<div class="footer-wrap">
<router-link to="/find">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/friend">朋友</router-link>
</div>
<div class="top">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
.footer-wrap{
width: 100%;
height: 100px;
background-color: #333333;
}
.footer-wrap a{
color: white;
text-decoration: none;
width: 33%;
height: 100%;
line-height: 100px;
display: inline-block;
font-size: 30px;
text-align: center;
border-right: 2px solid #cccccc;
}
*{
margin: 0;
padding: 0;
}
.router-link-active{
background-color: purple;
}
</style>FindMusic.vue
<template>
<div class="find-music">
<p>发现音乐</p>
<p>发现音乐</p>
<p>发现音乐</p>
<p>发现音乐</p>
</div>
</template>
<script>
export default {
name: "FindMusic"
}
</script>
<style scoped>
</style>MyFriend.vue
<template>
<div>
<p>我的朋友</p>
<p>我的朋友</p>
<p>我的朋友</p>
<p>我的朋友</p>
</div>
</template>
<script>
export default {
name: "MyFriend"
}
</script>
<style scoped>
</style>MyMusic.vue
<template>
<div>
<p>我的音乐</p>
<p>我的音乐</p>
<p>我的音乐</p>
<p>我的音乐</p>
</div>
</template>
<script>
export default {
name: "MyMusic"
}
</script>
<style scoped>
</style>index.js
import Vue from 'vue'
import VueRouter from "vue-router";
import FindMusic from "@/views/FindMusic"
import MyMusic from "@/views/MyMusic";
import MyFriend from "@/views/MyFriend";
Vue.use(VueRouter);
const router = new VueRouter({
routes:[
{ path:'/find',component:FindMusic},
{ path:'/my',component: MyMusic},
{ path:'/friend',component:MyFriend}
]
});
export default router
