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" },//此处通过重定向设置默认路由