526互联

使用vue路由

发布时间 2023-11-12 20:28:42作者: 超爱彬宝同学

1.安装vue-router

对应版本号为

233

344

使用以下命令

yarn add vue-router@3.6.5
或者
npm install vue-router@3.6.5

2.在main.js里面使用vue-router

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
const router=new VueRouter()
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

以下是小实验

app.vue
<template>
  <div class="">
    <div class="footer_wrap">
    <a href="#/find">找音乐</a>
    <a href="#/Music">选音乐</a>
    <a href="#/MyMessage">查消息</a>
  </div>
  <div class="top">
    <router-view></router-view></div>
  </div>
</template>

<script>
export default {
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover {
  background-color: #555;
}
</style>

find.vue

<template>
  <div class="">
    <span>find</span>
    <span>find</span>
    <span>find</span>
  </div>
</template>

<script>
export default {
    name:'FindMyMusic'
}
</script>

<style>

</style>
View Code

music.vue

<template>
  <div class="">
    <span>AllMusic</span>
    <span>AllMusic</span>
    <span>AllMusic</span>
  </div>
</template>

<script>
export default {
    name:'AllMusic'
}
</script>

<style>

</style>
View Code

mymessage

<template>
  <div class="">
    <span>myMessage</span>
    <span>myMessage</span>
    <span>myMessage</span>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>
View Code

 

 选择不同的会让路由变化不同