目錄
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'等進行區分拼接