路由之间的转跳及传参

跳转

路由之间的转跳可以通过两种方式实现：

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:参数}})