vue路由跳转的三种方式


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>
【vue路由跳转的三种方式】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=https://www.baikehuo.com/baike/"1" selected="selected">成都市
<option value=https://www.baikehuo.com/baike/"2">北京市
</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:‘/’ }相近,也不做太多的讲解了 。
以上便是我的共享了,期待可以协助到大伙儿 。