原文：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：‘/’ }相似，再也不赘述