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：‘/’ }類似，就不做過多的介紹了。
