vue 路由的配置和使用——1.2_<transition name="move" mode="out-in">-优快云博客

本文链接：https://blog.youkuaiyun.com/fengxiaopeng74/article/details/83894227

本文介绍Vue中使用vue-router进行页面跳转的多种方法，包括直接使用$router.push进行路由跳转，通过设置路由参数实现页面间的数据传递，以及利用自定义事件和方法实现tab切换时的路由变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由的配置差不多就说这么多，毕竟我也不是特别的精通，只是将一些工作中的心得或者是别人教我的方法拿来跟大家分享一下，希望大家多多鼓励！！！

这次来给大家说说路由的使用，原先学习的时候要跳转路由需要干些什么

原先学习的：

定义一个标签 <router-link to="/welcome"> </router-link>

将路由标签设置成自己想要的标签类型：

<router-link tag="div">sdfsdfadsfsdf</router-link>       //这时候路由标签就变成了div标签

详细的讲解可以看 Vue 爬坑之路（三）—— 使用 vue-router 跳转页面_LarryHai6的博客-优快云博客说得挺详细的

/************************重点来了**************************/

那么当我设置的时候不想用router标签了，感觉每次这么弄都好麻烦，怎么办？

可以直接这样：

<span @click="onRouter">我要点击它切换路由</span>

onRouter(){

this.$router.push({

name:"welcome"  ,//也可以  path:"/welcome"

query:{   //这个是当我跳转到下一个页面时需要传递的参数可以通过这样传递过去

id:"123"

}

})

}

那么另一个页面如何接收呢？直接在------

data(){

    return{

        id:this.$route.query.id ,  //这样就可以主要在哪里使用直接就可以用了
    
    }
}

那么一个最简单的tab切换来切换路由怎么切换呢？

给大家一个demo看看好不好用 ,

<template>
    <div> 
        <!-- ul  li tab切换的标题  -->
        <ul class="tab">
            <li v-for="(item,index) in tabTitle" 
                :key="index" 
                @click="onTab(item.name)">
                    {{item.value}} 
            </li>
        </ul>
        <!-- tab切换的内容 -->
        <div class="tabContent">
            <transition name="move" mode="out-in"><router-view></router-view></transition>
        </div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        tabTitle:[
            {
                value:"用户管理",   //这个是标题
                name:"taskShape"   //这个是配置好的路由名称
                
            },
             {
                value:"配置管理",
                name:"taskStatistics"
             },
              {
                value:"角色管理",
                 name:"scoreShape"
            },
             {
                value:"定时任务补偿",
                 name:"scoreCharts"
            }

        ],

      };
    },
    methods: {
      onTab(val){  //点击的时候将对应的name传过来
        console.log(val);
        this.$router.push({
            name:val   
        })
      }
    }
  };
</script>
<style scoped>

.tab li{
    padding: 10px 20px;
    float: left;
    color: white;
   background: rebeccapurple;
}
.tab li:hover{
    background: green;
    
}
</style>