详解Vue中router-view组件的使用
更新时间：2023年06月18日 15:20:03 作者：Saga Two
router-view组件作为vue最核心的路由管理组件，在项目中作为路由管理经常被使用到，所以下面小编就来和大家详细聊聊router-view组件的具体使用方法，希望对大家有所帮助
一、介绍
router-view组件作为vue最核心的路由管理组件，在项目中作为路由管理经常被使用到。vue项目最核心的App.vue文件中即是通过router-view进行路由管理。
<template>
<div id="app">
<router-view></router-view>
</div>
</template>我们在自己维护项目的时候，也可以使用router-view组件进行路由管理，对于页面局部刷新的场景，该组件能发挥关键作用；
二、使用方法
我们通过具体场景来介绍router-view组件用法：
1 实现效果
通过切换底部导航栏进行页面内容区域切换：
实现的功能是：点击消息、联系人、动态；页面内容进行切换；页面标题以及底部导航栏不变；
2 代码
最关键的是router.js配置：
{
path: "/routerViewPractice",
name: "routerViewPractice",
component: () => import("@/views/routerView/index.vue"),
redirect: '/messagePage',//页面默认加载的路由
children: [
{
path: "/messagePage",
name: "messagePage",
component: () => import("@/views/routerView/childPages/messagePage.vue")
},
{
path: "/contactPage",
name: "contactPage",
component: () => import("@/views/routerView/childPages/contactPage.vue")
},
{
path: "/dynamicPage",
name: "dynamicPage",
component: () => import("@/views/routerView/childPages/dynamicPage.vue")
}
]
}文件说明：
- routerViewPractice：父路由path；
- redirect：页面router-view组件默认加载的路由；
- children：用于父页面进行切换的子路由；
vue父页面代码：
<template>
<div>
<title-bar :title="title" @goBack="goback"></title-bar>
<router-view></router-view>
<BottomBar
@handleMsg='handleMsg'
@lookContact='lookContact'
@readDynamic='readDynamic'
></BottomBar>
</div>
</template>
<script>
import TitleBar from "@/components/TitleBar";
import BottomBar from "@/components/BottomBar";
export default {
name: "",
components: {
TitleBar,
BottomBar
},
data() {
return {
title: "路由视图",
};
},
methods: {
// 返回方法
goback() {
// this.$emit("GoBack");
},
handleMsg() {
this.$router.push({path: '/messagePage'})
},
lookContact() {
this.$router.push({path: '/contactPage'})
},
readDynamic() {
this.$router.push({path: '/dynamicPage'})
}
}
};
</script>
<style scoped>
#page-title {
width: 100%;
background-color: #fff;
display: flex;
justify-content: center;
}
.backImg {
width: 20px;
}
</style>使用this.$router.push进行页面上router-view组件的路由替换；实现点击底部导航栏页面切换功能；
以上就是详解Vue中router-view组件的使用的详细内容，更多关于Vue router-view的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要介绍了详解用webpack2.0构建vue2.0超详细精简版，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要介绍了Vue 结合插件moment 实现获取当前月的第一天和最后一天,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
这篇文章主要介绍了vue 源码目录及构建过程分析，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
今天小编就为大家分享一篇Vue中对拿到的数据进行A-Z排序的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue+j简单的实现轮播效果,滚动公告,衔接,文章围绕主题的相关资料展开详细的内容具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
本文主要介绍了ElementUI中el-tabs事件绑定的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了vue打包的时候自动将px转成rem的操作方法,需要的朋友可以参考下2018-06-06
今天小编就为大家分享一篇快速解决vue-cli在ie9+中无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue3无法显示element-plus问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
防抖（Debounce）在前端开发中是一种常用的技术,它的作用是限制某个操作在短时间内的频繁触发,下面我们就来看看如何一个Vue指令搞定函数防抖吧2024-02-02
最新评论