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