vue中跳转页面并传参

<template>
    <div>
        <!-- vue路由实现页面跳转的两种方式 -->



       <div style="background:pink;">
         <!-- 第一种方式----通过 <router-link> 实现 -->
          <h3>第一种实现页面跳的方式</h3>
          <ul>     
            <router-link to="/layout-one/aaaa">切换1</router-link>
            <router-link :to="'/layout-one/bbbb'">切换2</router-link>
            <router-link :to="{path:'/layout-one/cccc'}">切换3</router-link>
            <router-link :to="{name:'dddd'}">切换4</router-link>

            <!-- 1.传参的写法 -->
            <!-- 传参的写法如下面代码用params，并且同时需要在router.js中对eeee的路径进行配置，在path中eeee后添/:和对应的userId(例path:'eeee/:userId')；-->
            <!-- 在新页面中获取到传过来的参数userId----在mounted钩子中使用 this.$route.params.userId，-->

            <router-link :to="{name:'eeee',params:{userId:msg}}">切换5</router-link>

            <!-- 2.传入地址键值对 -->
            <!-- 传入地址键值对----写法如下面代码用query（该方法不用和方法1一样在router.js里再配置路径）-->
            <router-link :to="{ path:'/layout-one/ffff', query: { plan:msg0}}">切换6</router-link>
          </ul>
       </div>
    


       <div style="background:pink;">
          <!-- 第二种方式 -->
          <h3>第二种实现页面跳的方式</h3>
           <!-- 1.传参的写法 -->
          <button @click="toURL">跳转页面7</button>

          <!-- 2.传参的写法 -->
          <button @click="toURL1">跳转页面8</button>

           <!-- 传入地址键值对 -->
          <button @click="toURL2">跳转页面9</button>
       </div>



        <div style="background:pink;">
          <h3>在router的index.js中,只要是在该组件配置的路由 下的 所有 子路由，相互之间不管怎么跳转都是在父级的这个router-view中显示</h3>
          <router-view></router-view>
        </div>

        
    </div>
</template>

<script>
export default {
    
    data() {
      return {
        msg:"要传给eeee组件页面的参数",
        msg0:"要传给ffff组件页面的参数",

        msg1:"要传给gggg组件页面的参数",
        msg2:"要传给hhhh组件页面的参数",
        msg3:"要传给iiii组件页面的参数",
      }
    },
    methods:{
        toURL(){
          this.$router.push({ path: '/layout-one/gggg',query: { plan: this.msg1}})   //跳转组件并携带参数，在跳转到的组件中用this.$route.query.plan接收参数plan
        },

        toURL1(){
          this.$router.push({ name: 'hhhh', params: { userId: this.msg2 }})  //跳转组件并携带参数，在跳转到的组件中用this.$route.query.plan接收参数plan
        },

        toURL2(){
          this.$router.push({ name: 'iiii', params: { userId: '要传给iiii组件页面的参数1' }, query: { plan: this.msg3 } })
        }
    },
    beforeCreate(){
      
    },
    created(){
     
    },
    beforeMount(){
      
    },
    mounted(){

    },
    beforeUpdate(){
      
    },
    updated(){
       
    },
    beforeDestroy(){
      
    },
    destroyed(){
     
    }
}
</script>


<style>
  
        
</style>

vue中跳转页面并传参

猜你喜欢