1、router-link 【實現跳轉最簡單的方法】
<router-link to='需要跳轉到的頁面的路徑>
瀏覽器在解析時，將它解析成一個類似於<a> 的標簽。
|
1
2
3
4
|
#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文件中
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<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文件中
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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：‘/’ }類似，不再贅述