2019-04-30 路由传值

1，使用query的形式传参

---

使用url传参

url中使用"?属性名=属性值"，例如：“XXX?login=10”

拿到对应的值

在组件中使用“this.$route+query+属性名”

在地址栏中使用&可以传入两个值

#/login?id=10&name=zs

使用实例：

在前端的url中使用上述传入参数

使用this.$route.query.+属性名，获取对应的参数
<div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
</div>
<script>
    var login = {
        template: '<h1>登录组件</h1>',
        created() {
            console.log(this.$route.query.id)
        }
    };
    var register = {
        template: '<h1>注册组件</h1>'
    };
    var routerObj = new VueRouter({
        routes: [

            {path: '/login', component: login},
            {path: '/register', component: register},
        ]
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        router: routerObj
    })
</script>

使用params方法传参

url传参

在定义路由规则的时候对path修改成"/XXX/:id"，这样，在前端的地址栏中直接使用XXX/值，即可将值传入

获取参数

这个时候数据是在params集合中的键值对的形式的对象中
使用this.$route.params.id即可取出值

注意传入的时候，对path的修改时“/:id”不要忽略其中的“：”

如果是使用多个值的话，就写成形如“/:id/:name”的形式

对于在对应的组件中获取，可以使用“this.$route.params.id”，同样的对于该组件，所以this可省略

<div id="app">
    <router-view>

    </router-view>
</div>
<template id="login">
    <div>
        <h1>登录界面--{{$route.params.id}}--{{$route.params.name}}</h1>
    </div>
</template>
<template id="register">
    <div>
        <h1>注册界面</h1>
    </div>
</template>
<script>
    var login = {
        template: '#login',
        // template: '<h1>登录界面</h1>'
        created() {
            console.log(this.$route.params.id)
        }
    };
    var register = {
        template: '#register'
        // template: '<h1>注册界面</h1>'

    };
    var routerObj = new VueRouter({
        routes: [
            // {path:'/',redirect:'/login'},
            {path: '/login/:id/:name', component: login},
            {path: '/register', component: register}
        ]
    });

    var vm = new Vue({
        el: '#app',
        data: {},
        router: routerObj
    })