Vue之路由导航传参

在vue路由中，给路由传参有两种方法

• query
• params

一、query传参

1. 相当于Node中用get方式传参，传参的内容会拼接到路径上
2. 可使用声明式导航，编程式导航
3. query是一个对象形式的传参

 代码案例

<div id="app">
<!--    <router-link to="/login">登录</router-link>-->
<!--    使用path（组件相对应的路由名称），传递的参数用query对象来传递-->
    <router-link :to="{path:'/login',query:{name:'我是path传递的数据'}}">登录</router-link>
    <!--    使用name（路由名称），传递的参数用query对象来传递-->
    <router-link :to="{name:'login',query:{name:'我是name传递的数据'}}">登录</router-link>
    <router-view></router-view>
</div>
<template id="login">
    <div>
        <h1>登录</h1>
<!--        使用this.$route.query来接收传递的参数-->
        <h1>{{this.$route.query}}</h1>
    </div>

</template>

注意：由于query是对象的形式，所以还可以用this.$route.query.属性名 来获取属性值

<script>
    let Login = {
        template:'#login'
    }
    let router = new VueRouter({
        routes:[{
            name:'login',
            path:'/login',
            component:Login
        }]
    })
    new Vue({
        el:'#app',
        router
    })
</script>

---

二、params传参

1. 相当于Node中用post方法传递参数，不会拼接到路径上
2. 可以使用字符串式，声明式，编程式传参
3. params是一个对象

代码案例 

<div id="app">
<!--    <router-link to="/login">登录</router-link>-->
<!--    使用path（组件相对应的路由名称），传递的参数用params对象来传递-->
    <router-link :to="{path:'/login',params:{name:'我是path传递的数据'}}">登录</router-link>
<!--    使用path的时候，我们会发现它没办法通过path来传递参数-->


    <!--    使用name（路由名称），传递的参数用params对象来传递-->
    <router-link :to="{name:'login',params:{name:'我是name传递的数据'}}">登录</router-link>
    <router-view></router-view>
</div>
<template id="login">
    <div>
        <h1>登录</h1>
<!--        使用this.$route.params来接收传递的参数-->
        <h1>{{this.$route.params}}</h1>
    </div>

</template>

<script>
    let Login = {
        template:'#login'
    }
    let router = new VueRouter({
        routes:[{
            name:'login',
            path:'/login',
            component:Login
        }]
    })
    new Vue({
        el:'#app',
        router
    })
</script>

注意：

1.  params无法通过path来传递参数
2. params和query都可以通过属性名来获取数据

---

三、params传参扩展 

之前说过params可以通过字符串来传递参数，但是没办法通过path来传递，其实params可以通过path来传递，需要一下几个步骤

• 在路由中的path路径上拼接/login/:id       后面（/:id）可以拼接很多个
• 需要在路由里面设置props:true
• 在组件添加props数组（数组中是路径里面的id）

代码案例 

<div id="app">

<!--    params其实可以通过path进行跳转-->
<!--    /login/任意/任意-->
    <router-link to="/login/我的path传递的/我是id1">登录</router-link>

    <router-view></router-view>
</div>


<template id="loginId">
    <div>
        <h1>{{this.$route.params}}</h1>
<!--    我的path传递的-->
        <h2>{{username}}</h2>
<!--    1-->
        <h2>{{id}}</h2>
    </div>


</template>

<script>

    let LoginComponent = {
        template:"#loginId",
        props: ["username","id"]
    }

    let router = new VueRouter({
        routes:[
            {
                name:"login",
                path:"/login/:username/:id",
                component:LoginComponent,
                //相当于开启path传递
                props:true
            }
        ]
    });

    new Vue({
        el:"#app",
        router
    });

</script>

注意：

• parpms使用path的方法，query是不能使用的