当前位置:家常菜>百科>科技>正文

vue路由跳转的三种方式

人气:433 ℃/2024-05-25 19:52:31

vue路由跳转的三种方式是怎样的呢?下面就让我们一起来了解一下吧:

1、router-link,这属于实现跳转最简单的方式。

<router-link to='需要跳转到的页面的路径>

浏览器在解析时,会将它解析成一个类似于<a> 的标签。

div和css样式略

<li >

        <router-link to="keyframes">点击验证动画效果 </router-link>  

 </li>

不要忘记了给需要跳转的路径在需要提前在router/index.js下引入。

2、this.$router.push({ path:’/user’})

常常用于路由传参,用法与第三种相似。

区别是:

1.query引入方式

params只可以用name来引入路由。

而query需要用path引入。

2.query传递方式

与ajax中get传参类似,在浏览器地址栏中显示参数。

params则类似于post,在浏览器地址栏中不显示参数。

在helloworld.vue文件中

<template>

.....

<li @click="change">验证路由传参</li>

</template>

<script>

export default {

  data () {

    return {

      id:43,  //需要传递的参数

    }

  },

  methods:{

    change(){

      this.$router.push({  //核心语句

        path:'/select',   //跳转的路径

        query:{           //路由传参时push和query搭配使用 ,作用时传递参数

          id:this.id , 

        }

      })

    }

  }

}

</script>

在select.vue文件中

<template>

  <select>

          <option value="1" selected="selected">成都</option>

          <option value="2">北京</option>

      </select>

</template>

<script>

    export default{

        data(){

            return{

                id:'',

            }

        },

        created(){  //生命周期里接收参数

            this.id = this.$route.query.id,  //接受参数关键代码

            console.log(this.id)  

        }

    }

</script>

当然也可以在使用的标签中通过v-if = ‘id == 1’或是else-if = 'id == 2'等进行区分拼接。

3、this.$router.replace{path:‘/’ }类似,就不做过多的介绍了。

  • 2021年情人短信祝福语

    1、爱情产生的时候有确切标志吗?天知道!我只知道,日日夜夜的每时每刻,我的脑海总是不由自主冒出你的影子!2、女人若留下今生的东西来世定会千方百计地寻了去;今生将你的爱好好保留,...

    祝福语查看全文>>
  • 情侣发空间的文案(情侣发空间说说文案)

    1、这世间的太多事情真真假假,也没有那么多的清清楚楚和明明白白。大多数时候,我们能认清自己已经实属不易,至于别人的故事,也用不着太走心。2、喜欢你看我的感觉,喜欢你微笑的直接。...

    句子查看全文>>
  • 汽车大灯透镜怎么调?

    汽车大灯透镜的调节方法是把大灯总成的螺丝卸下,然后把灯泡的卡子去掉,打开灯,将灯泡向上,焦点在切割线的上面一点就可以了。汽车透镜主要用于氙气灯,而大灯透镜就是在大灯灯泡前方增加...

    问答查看全文>>
  • 六年级数学教学工作总结模板

    六年级数学教学工作总结怎么写呢?一起来看看小编今天的分享吧。1、六年级数学教学工作总结首先可以描写六年级数学教学的日常工作内容和具体表现;2、然后可以描写在数学教学工作期间取得...

    教育查看全文>>
  • 正在分期的车怎么卖

    有两种情况,第一就是连带分期付款跟车子一起卖给买主;第二就是向要求买车的人承担继续分期付款的责任,或是要求卖车的时候取得全款,然后一次性付清。债权人是能够将合同的权利全部或者部...

    问答查看全文>>
本网站部分内容、图文来自于网络,如有内容侵犯您的合法权益,请及时与我们联系,我们将第一时间安排核实及删除!
CopyRight © 2007-2024 家常菜 All Rights Reserved. 手机版