原文：https://blog.csdn.net/qq_40072782/article/details/82533477css
router-view 實現路由內容的地方，引入組件時寫到須要引入的地方
須要注意的是，使用vue-router控制路由則必須router-view做爲容器。html
經過路由跳轉的三種方式vue
一、router-link 【實現跳轉最簡單的方法】ajax
<router-link to='須要跳轉到的頁面的路徑>
瀏覽器在解析時，將它解析成一個相似於<a> 的標籤。vue-router
|
1
2
3
4
|
#div和css樣式略
<li >
<router-link to=
"keyframes"
>點擊驗證動畫效果 </router-link>
</li>
|
別忘記給須要跳轉的路徑在須要提早在router/index.js下引入哦。 瀏覽器
二、this.$router.push({ path:’/user’})
經常使用於路由傳參，用法同第三種post
區別：動畫
1.query引入方式
params只能用name來引入路由
而query 要用path引入this
2.query傳遞方式
相似於咱們ajax中get傳參，在瀏覽器地址欄中顯示參數
params則相似於post，在瀏覽器地址欄中不顯示參數url
在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>
|
三、this.$router.replace{path：‘/’ }相似，再也不贅述