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

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

2024-11-05 23:11:06 前端知识 前端哥 880 181 我要收藏

vue怎么跳转不同界面

  • VueRouter实现多页面切换
    • VueRouter的使用步骤
      • (1)下载VueRouter包
      • (2)导入VueRouter包
      • (3)安装注册
      • (4)创建路由对象
      • (5)注入:将路由对象注入到new Vue实例中,建立关联
    • 实现三个vue页面的切换
      • (1)创建三个vue文件
      • (2)给三个vue文件写页面内容
      • (3)导入三个页面组件并规划路由
      • (4)使用路由(app.vue中使用)
      • (5)使用router-view标签实现切换效果
    • 实现切换效果代码分享
    • bug:关于为什么要写name: "MyFriend"?

摘要:这篇文章主要讲解使用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的。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/20078.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!