Vue路由传参和接收参数

Vue路由传参和接收参数

1.传参

  			 // 1.字符串的形式跳转到 about页面
            //this.$router.push("/about")
            // 2.对象形式
            //this.$router.push({ path: "/about" });
            //3.命名路由的形式
            // this.$router.push({ name: "About" });
            //4.替代的方式 是对当前页面的替换
            //this.$router.replace("/about");
            //5.携带查询参数 获取用this.$route.query.name
            //this.$router.push({ name: "About", query: { name: "张三" } });
            //this.$router.push({ path: "/about", query: { name: "张三" } });
            //6.携带params
            /*
            下面这个是有效的
            可以采用占位符的形式  path: '/about/:name',
            可以不采用占位符的形式  path: '/about',
            都是可以正常地获取到数据的
                                    */
            this.$router.push({ name: "About", params: { name: "张三" } });
            //下面这个是无效的
            // this.$router.push({ path: "/about", params: { name: "张三" } });

2.接收参数

 		console.log(this.$route);
        console.log(this.$route.name);
        console.log(this.$route.fullPath);
        console.log(this.$route.path);
        console.log(this.$route.meta);
        console.log(this.$route.query);
        console.log(this.$route.params);

        console.log(this.$router); //路由对象
        console.log(this.$router.options.routes); //所有的路由
        console.log(this.$router.mode);//路由模式