跳转
路由之间的转跳可以通过两种方式实现:
1、通过官方提供的router-link标签实现,它与a标签相似,给我们提供跳转到某个路由的功能。
用法:
<router-link to="路由网址/x">点击跳转到/x</router-link>
to属性就好比a标签的href属性。
其中to属性的值可以是就是字符串网址,也可以是对象的形式,如:
<router-link to="{path:"/x"}">点击跳转到/x</router-link>
2、编程式转跳,通过vue对象的原型上的$router对象的push方法,$router对象是我们配置路由插件时,Vue.use(VueRouter)给vue对象的原型添加的,在任何组件中都可以直接使用。
用法:值也是两种写法,直接写网址或者写在对象中
this.$router.push("/x")
this.$router.push({path:"/x"})
演示一下
注册三个路由:
import Vue from "vue";
import VueRouter from "vue-router"
//给组件的原型链绑定功能
Vue.use(VueRouter)
//注册路由
const routes=[
{
path:"/",
name:"home",
component:()=>import('../views/home/index.vue')
},{
path:"/login",
name:"login",
component:()=>import('../views/login/index.vue')
},
{
path:"/register",
name:"register",
component:()=>import('../views/register/index.vue')
}
]
//配置路由规则
const router = new VueRouter({
mode: 'history',
routes
})
//导出
export default router
在对应目录下创建三个组件文件。
home路由对应组件中,添加转跳代码:
<template>
<div class="box3">
<h1>home</h1>
<!-- 方法一 -->
<router-link to="/login">通过router-link标签转跳</router-link>
<!-- 方法二 -->
<button @click="rto">通过$router.push转跳</button>
</div>
</template>
<script>
export default{
methods: {
rto(){
this.$router.push({path:'/register'})
}
},
}
</script>
<style>
.box3{
width: 200px;
height: 200px;
background-color: hotpink;
}
</style>
页面效果:
点击第一个转跳到login路由,点击第二个转跳到register路由。
传参
传参的方法也是有两种:query传参和params动态路由传参
1、query传参
query传参是把参数放在网址的querystring字段中,对应路由转跳有四种写法那么传参时也有四种写法,如:
//直接拼接到to属性的属性值中,用?拼接
<router-link to="路由网址/x?参数1=aa,参数2=bbb,....">点击跳转到/x</router-link>
//router-link标签,to属性值为对象形式时
<router-link to="{path:'路由网址/x',query:{参数1:'aa',参数2:'bbb',....}">点击跳转到/x</router-link>
//$router.push()方法字符串写法
this.$router.push("/x?参数1=aa,参数2=bbb")
//$router.push()方法对象写法
this.$router.push({path:"/x",query:{参数1:'aa',参数2:'bbb'}})
在转跳后的路由中,在created钩子函数运行后,通过this.$route.query就可以获得传来的参数
2、params动态路由传参
动态路由传参就是把参数放在网址的pathname中,相比于query传参它还需要在注册路由时在需要接收参数的那个路由的path的属性中加一个变量用于接收参数调用,如:
{
path:"/login/:msg",
name:"login",
component:()=>import('../views/login/index.vue')
}
这里的msg设置了才能够动态传参,注意一定要加上:,不然接收不到;在created钩子函数运行后,通过this.$route.params就可以获得传来的参数,这时获得的值是一个对象,属性名为我们设置msg,值为我们传递的参数。
演示一下,我们已经login路由的网址中设置了msg,我们在home组件中传一个值过去,代码:
<template>
<div class="box3">
<h1>home</h1>
<router-link to="/login/ss">通过router-link标签转跳</router-link>
</div>
</template>
login组件中添加一个mounted钩子函数打印一下传来的值:
<template>
<div class="box3">
<h1>login</h1>
</div>
</template>
<script>
export default{
mounted() {
console.log(this.$route.params);
},
}
</script>
点击转跳后页面效果:
动态传参时也有四种写法,如:
//直接写在网址中
<router-link to="/login/参数">login</router-link>
//对象形式,不用写网址了,而是写路由的name;msg为我们注册时设定的变量,设定的什么这里就写什么
<router-link :to="{name:"login",params:{msg:参数}}">news</router-link>
//$router.push方法直接写网址
this.$router.push("/login/参数")
//对象形式
this.$router.push({name:"login",params:{msg:参数}})