vue路由传参总结

一、利用router-link进行路由传参

• 通过该方法切换路由后，地址栏是"test.html#/list/2"这种样式的
• 利用该方式传参在获取参数时使用"$route.params.id"方式获取

二、利用this.$router.push方式传参

• 通过该方法切换路由后，地址栏是"test.html#/list/3/getlist"这种样式的
• 利用该方式传参在获取参数时使用"this.$route.params.id"方式获取
• 这种方式传参和上面的router-link传参效果一样

注意： 通过上面两种方式传参时如果传递过多个参数需要在配置路由映射表时在请求的路径后面加多个/:参数名

<div id="app">
    <!--此处是通过router-link方式传参，需要在配置路由映射表时进行相应设置-->
    <router-link to="/home/1/lily" tag="button">首页</router-link>
    <router-link to="/list/2/hanmei" tag="button">列表</router-link>
    <router-view></router-view>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let home = {
        methods:{
            fn(id,name){
                //此处是通过`this.$router.push()`方式传参，同样也需要配置相应的路由映射表
                this.$router.push(`/list/${id}/${name}`);
            }
        },
        //通过$route.params.id来获取参数
        template: `<div @click="fn(3,'getlist')">首页传递参数：{{$route.params.id}} {{$route.params.name1}}</div>`
    };
    let list = {
        methods:{
            fn(id,name){
                this.$router.push(`/home/${id}/${name}`);
            }
        },
        template: `<div @click="fn(4,'getindex')">列表页传递参数：{{$route.params.id}} {{$route.params.name1}}</div>`
    };
    const routes = [
        { path: "/", redirect:"/home/1/lily" },//此处通过重定向设置默认路由
        { path: "/home/:id/:name1", component: home },
        { path: "/list/:id/:name1", component: list }
    ];
    const router = new VueRouter({ routes });
    let vm = new Vue({
        el: "#app",
        router
    });
</script>

三、通过路由中name属性匹配路由，通过params传参

• 通过这种方式传参主要是通过修改路由配置表，在里面添加name属性键值对
• 通过这种方式传参时分两种情况：
  • 通过router-link方式中匹配name属性传参需要先将to属性改为动态属性:to即:to="{name:'h1',params:{id:1,name1:'gethome'}}"
  • 通过this.$router.push({name:'h1',params:{id:3,name1:'getlist'}}),即在函数中传一个对象，对象中有两个键值对name和params
• 通过这种方式传参时在获取参数时使用$route.params.属性名的方式获取参数
• 通过name匹配路由并通过params传参时在地址栏不会显示传递的参数

<div id="app">
    <!--通过name属性匹配路由，此处需要将to变为动态属性，传参时在对象中添加params的键值对-->
    <router-link :to="{name:'h1',params:{id:1,name1:'getlist'}}" tag="button">首页</router-link>
    <router-link :to="{name:'l1',params:{id:2,name1:'gethome'}}" tag="button">列表</router-link>
    <router-view></router-view>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let home = {
        methods:{
            fn(id,name){
                //通过匹配路由的name属性来切换路由时用$router.push方法时参数需要穿一个对象，并且在传参时需要增加params键值对
                this.$router.push({name:'l1',params:{id:id,name1:name}});
            }
        },
        template: `<div @click="fn(3,'getlist')">首页传递参数：{{$route.params.id?$route.params.id:1}} {{$route.params.name1?$route.params.name1:'getlist'}}</div>`
    };
    let list = {
        methods:{
            fn(id,name){
                this.$router.push({name:'h1',params:{id:id,name1:name}});
            }
        },
        template: `<div @click="fn(4,'gethome')">列表页传递参数：{{$route.params.id}} {{$route.params.name1}}</div>`
    };
    const routes = [
        { path: "/", redirect:"/home" },//对默认路由进行设置
        //在通过匹配name切换路由时需要在路由配置表中新增name属性
        { path: "/home", component: home,name:"h1" },
        { path: "/list", component: list,name:"l1" }
    ];
    const router = new VueRouter({ routes });
    let vm = new Vue({
        el: "#app",
        router
    });
</script>

四、通过匹配name属性，并通过query方式传参

• 通过这种方式传参，在切换路由后地址栏地址会显示添加的参数test.html#/list?id=2&name1=gethome
• 通过这种方式传参有两种情况
  • 通过router-link传参时需要将to属性变为动态属性，并且传参时使用query，即:to="{name:'h1',query:{id:2,name1:'getlist'}}"
  • 通过this.$router.push方式传参时需要用this.$router.push({name:'h1',query:{id:2,name1:'getlist'}})
• 通过这种方式传参在获取对应的参数时使用$route.query.属性名的方式获取

<div id="app">
    <!--通过匹配name属性并通过query传参-->
    <router-link :to="{name:'h1',query:{id:1,name1:'getlist'}}" tag="button">首页</router-link>
    <router-link :to="{name:'l1',query:{id:2,name1:'gethome'}}" tag="button">列表</router-link>
    <router-view></router-view>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let home = {
        methods:{
            fn(id,name){
                //通过`this.$router.push`切换路由时需要在传参数时将属性名变为query
                this.$router.push({name:'l1',query:{id:id,name1:name}});
            }
        },
        //此时获取数据需要通过`$route.query.属性名`的方式获取数据
        template: `<div @click="fn(3,'getlist')">首页传递参数：{{$route.query.id?$route.query.id:1}} {{$route.query.name1?$route.query.name1:'getlist'}}</div>`
    };
    let list = {
        methods:{
            fn(id,name){
                this.$router.push({name:'h1',query:{id:id,name1:name}});
            }
        },
        template: `<div @click="fn(4,'gethome')">列表页传递参数：{{$route.query.id}} {{$route.query.name1}}</div>`
    };
    const routes = [
        { path: "/", redirect:"/home" },
        { path: "/home", component: home,name:"h1" },
        { path: "/list", component: list,name:"l1" }
    ];
    const router = new VueRouter({ routes });
    let vm = new Vue({
        el: "#app",
        router
    });
</script>

五、利用path匹配路由，并使用query传参

• 通过这种方式传参，在切换路由后地址栏地址会显示添加的参数test.html#/list?id=2&name1=gethome
• 通过这种方式传参有两种情况
  • 通过router-link传参时需要将to属性变为动态属性，并且传参时使用query，即:to="{path:'/home',query:{id:2,name1:'getlist'}}"
  • 通过this.$router.push方式传参时需要用this.$router.push({path:'/list',query:{id:2,name1:'getlist'}})
• 通过这种方式传参在获取对应的参数时使用$route.query.属性名的方式获取

<div id="app">
    <!--需要将to变为动态属性-->
    <router-link :to="{path:'/home',query:{id:1,name1:'getlist'}}" tag="button">首页</router-link>
    <router-link :to="{path:'/list',query:{id:2,name1:'gethome'}}" tag="button">列表</router-link>
    <router-view></router-view>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let home = {
        methods:{
            fn(id,name){
                this.$router.push({path:'/list',query:{id:id,name1:name}});
            }
        },
        template: `<div @click="fn(3,'getlist')">首页传递参数：{{$route.query.id?$route.query.id:1}} {{$route.query.name1?$route.query.name1:'getlist'}}</div>`
    };
    let list = {
        methods:{
            fn(id,name){
                this.$router.push({path:'/home',query:{id:id,name1:name}});
            }
        },
        template: `<div @click="fn(4,'gethome')">列表页传递参数：{{$route.query.id}} {{$route.query.name1}}</div>`
    };
    const routes = [
        { path: "/", redirect:"/home" },
        { path: "/home", component: home },
        { path: "/list", component: list }
    ];
    const router = new VueRouter({ routes });
    let vm = new Vue({
        el: "#app",
        router
    });
</script>

注意： 不能通过匹配路由的path并且通过params传参，此时会把params传递的参数忽略掉。

参考文章：https://www.jianshu.com/p/5dff306fdb0f