关于在vue项目中使用 Tabbar 时 router-view的使用 以及 动态设置重定向

一：前言

在 vue 开发过程中，我们会发现很少使用到 router-view 这个东西，最近有个项目需求是4个 tabbar 页面，刚好用到了这个必不可少的东西，也遇到了一些问题，特来总结一下。
一开始出发点很简单，几个页面跳转而已吗，路由跳就是了，结果发现并不是我们想要的结果，因为我们 不想跳转到新页面，只在当前页面切换着显示，这里就涉及到了 router-view 这个东西

二：实现

以此项目为例，

在同一个页面，切换显示不同组件也就是页面的内容，同时改变路由地址。

分离组件

首先，我们在底部的Tabbar组件中写了几个导航标签，并且加上 router-view这个标签
pollManageFooter.vue：

// 底部 Tabbar 组件
	<div class="navbar">
		<ul id="main">
			<li><router-link  to="/pollManageInfo" >首页</router-link></li>
			<li><router-link  to="/pollManageDetails">详情</router-link></li>
			<li><router-link  to="/pollManageSignUp">报名</router-link></li>
 
		</ul>
		
            <!-- 路由匹配到的组件将显示在这里 -->
           <router-view></router-view>

然后，我们需要有一个公共页面来引入 pollManageFooter.vue
index.vue：

<template>
    <div class="votemain">
        <router-view></router-view>
        <pollManageFooter></pollManageFooter>
    </div>
</template>

<script>
    // 底部 悬浮栏
    import pollManageFooter from "./pollManageFooter/pollManageFooter"

    export default {
        name: "votePollManage",
        components:{
            pollManageFooter,
        }
    }
</script>

之后，路由配置时，需将你的 index 页面作为父页面来切换展示 子页面。

此时，需要有一个默认页面，也就是 首页 的页面，在 redirect 中写入即可。

三：redirect 的 动态重定向设置

以我项目为例，我的 跳转页面是需要分享至 微信的，此时分享出去的页面也得有一个 tabbar，可在分享页面中点击切换，此时就涉及到 分享不同的页面你 父页面将会默认显示不同页面的一个问题，这里就需要将 redirect 进行动态设置来根据 路由参数 的不同而默认显示不同的页面。

{
        path: '/share/shareVotePollManage/index_1',
        name: 'shareVotePollManage',
        component: shareVotePollManage,
        redirect: to => {
            const {hash , params , query} = to;
            if (params.str == "shareVoteInfo"){
                return '/sharePollManageInfo'
            }else if (params.str == "shareVoteDetail"){
                return '/sharePollManageDetails'
            }else if (params.str == "shareVoteRank") {
                return '/sharePollManageRanking'
            }
        },
        children:[

根据你前端所传的参数名的不同来显示。

四，总结。

虽说是一个不复杂的东西，但做项目时真正遇见的小问题也确实让人心烦，所以，记录一下，觉得有用的话可以点个赞再走哦。