【vue怎么跳转不同界面】VueRouter实现简单vue多页面切换

摘要：这篇文章主要讲解使用VueRouter如何实现简单页面切换，以及理解原理。

需要实现的页面切换效果如下所示，点击不同的按钮，切换到对应页面。（页面底部会分享出来代码）

未配置路由时，运行vue项目，浏览器的路径长下面这样：

VueRouter实现多页面切换

VueRouter的使用步骤

（1）下载VueRouter包

下载 VueRouter 模块到当前工程，版本3.6.5。（注意：vue3选择V4.x，vue2选择V3.x）

yarn add vue-router@3.6.5 //使用yarn下载
npm i vue-router@3.6.5   //使用npm下载

（2）导入VueRouter包

import VueRouter from 'vue-router'

（3）安装注册

Vue.use(VueRouter)

（4）创建路由对象

const router =new VueRouter()

（5）注入：将路由对象注入到new Vue实例中，建立关联

将我们第（4）步骤得到的router对象，与Vue实例联系起来（因为router对象还是独立的，起不了作用）

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

以上步骤完成，会发现基本操作已经配置好，那么运行vue项目，浏览器路径有所变化：

实现三个vue页面的切换

（1）创建三个vue文件

注意，切换的是页面，所以需要使用的是页面组件，因而我们需要将新建的三个vue文件放在views文件夹中而非components文件夹中。（理解一下这句话，路径直接对应的是页面而非小组件）

（2）给三个vue文件写页面内容

My.vue文件如下：

Find.vue文件如下：

Friend.vue文件如下：

（3）导入三个页面组件并规划路由

页面组件就是为了搭配路由使用的，这样才可以实现点击不同按钮，对应展现不同页面。

（4）使用路由（app.vue中使用）

（5）使用router-view标签实现切换效果

实现切换效果代码分享

My.vue代码

<template>
  <div>
    <div>我的音乐</div>
    <div>我的音乐</div>
    <div>我的音乐</div>
    <div>我的音乐</div>
  </div>
</template>
    
    <script>
export default {
  name: "MyMusic",
};
</script>
    
    <style>
</style>

Friend.vue代码

<template>
  <div>
    <div>朋友</div>
    <div>朋友</div>
    <div>朋友</div>
    <div>朋友</div>
    <div>朋友</div>
  </div>
</template>

<script>
export default {
  name: "MyFriend",
};
</script>

<style>
</style>

Find.vue代码

<template>
  <div>
    <div>发现音乐</div>
    <div>发现音乐</div>
    <div>发现音乐</div>
    <div>发现音乐</div>
  </div>
</template>
  
  <script>
export default {
  name: "FindMusic",
};
</script>
  
  <style>
</style>

app.vue代码

<template>
  <div id="app">
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div>
    <div class="top">
      <!-- VueRouter内置好的，自动展现需要展示的组件页面，
       比如点击发现音乐的超链接，前端展示Find.vue的页面内容 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: "App",
  components: {
    // HelloWorld
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.footer_wrap {
  background-color: #333; /* 深色背景 */
  color: #fff; /* 白色字体 */
  text-align: center; /* 中心对齐 */
  padding: 20px; /* 上下内边距 */
  position: relative; /* 允许绝对定位的子元素 */
}

.footer_wrap a {
  color: #fff; /* 链接的颜色 */
  text-decoration: none; /* 去掉下划线 */
  margin: 0 15px; /* 左右外边距 */
  font-size: 16px; /* 字体大小 */
  transition: color 0.3s;
}

.footer_wrap a:hover {
  color: #ff9800; /* 悬停时变色 */
}

/* 响应式设计 */
@media (max-width: 600px) {
  .footer_wrap {
    padding: 10px; /* 缩小内边距 */
  }

  .footer_wrap a {
    font-size: 14px; /* 缩小字体 */
    margin: 0 10px; /* 缩小外边距 */
  }
}
</style>

main.js代码

import Vue from 'vue'
import App from './App.vue'
// 路由的步骤
// 1.下载v3.6.5  
// 2.引入
// 3.安装注册Vue.use
// 4.创建路由对象
// 5.注入到new Vue中，建立关联
import VueRouter from 'vue-router'
import Find from './views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend.vue'
Vue.use(VueRouter)

const router =new VueRouter({
  routes:[
    {path:'/find',component:Find},
    {path:'/my',component:My},
    {path:'/friend',component:Friend},
  ]
})
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

bug：关于为什么要写name: “MyFriend”？

页面组件相关的名字至少需要2个单词才可以，不要问我为什么，底层规定。

当然，你们在学习过程中也可以将页面组件相关的名字起名为至少2个单词，也是ok的。