vue学习之路由问题(附实例及地址栏中的参数去除问题解决)

路由传参语法

列表点击页

this.$router.push(path:"",query:{"跳转页接收变量名":"当前页的值"})
this.$router.push(path:"/sdf/test",query:{"id":this.ids})

详情跳转页

this.$route.query.跳转页接收变量名;
let id = this.$route.query.id;

列表点击页

this.$router.push(name:"",params:{"跳转页接收变量名":"当前页的值"},path:"地址栏展示",components:() => {"@/跳转页的路径"})

this.$router.push({name:"detail",params:{"id":val.id},path : "web/regulation/detail",components:() => {"@/views/web/regulation/detail"}});

详情展示页

this.$route.params.跳转页接收变量名;
let id = this.$route.params.id;

1、路由传值 this.$router.push() 及赋值 传递参数

（1） 想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL

（2）当点击 时，这个方法会在内部调用，即点击 等同于调用 router.push(…)

a) 声明式：

b) 编程式：router.push(…) [建议使用]

c) 该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

// 字符串
router.push('home')
 
// 对象
this.$router.push({path: '/login?url=' + this.$route.path});
 
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
 
// 带查询参数，变成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});
 
// 设置查询参数
this.$http.post('v1/user/select-stage', {stage: stage})
      .then(({data: {code, content}}) => {
            if (code === 0) {
                // 对象
                this.$router.push({path: '/home'});
            }else if(code === 10){
                // 带查询参数，变成/login?stage=stage
                this.$router.push({path: '/login', query:{stage: stage}});
           }
});
 
// 设计查询参数对象
let queryData = {};
if (this.$route.query.stage) {
    queryData.stage = this.$route.query.stage;
}
if (this.$route.query.url) {
    queryData.url = this.$route.query.url;
}
this.$router.push({path: '/my/profile', query: queryData});

2、获取参数的两种常用方法：params和query

（1）由于动态路由也是传递params的，所以在
this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。

及通过路由配置的name属性访问

this.$router.push({name:"menuLink",params:{alert:"页面跳转成功"}})

（2）在目标页面通过this.$route.params获取参数：

提示：{{this.$route.params.alert}}

（3）在目标页面通过this.$route.query 获取参数

//传值
this.$router.push({path:"/menLink",query:{alert:"页面跳转成功"}})

//用query获取值
提示：{{this.$route.query.alert}}

两种方式的区别是query传参的参数会带在url后边展示在地址栏，params传参的参数不会展示到地址栏。需要注意的是接收参数的时候是route而不是router。两种方式一一对应，名字不能混用!实例↓↓↓↓↓↓↓↓↓

去除地址栏中的参数

点击跳转后,地址栏中暴露出传的参数有些时候是粉肠不安全的!

带参数:
列表点击页
使用jquery的方法将id传输过去
:href=“‘/web/regulation/detail?id=’ + zcfg.id” ** 注意这儿的双引号和单引号**
反正这种的确很聪明,简洁不需要多余的方法!

        
          {{parseTime (zcfg.createdate,'[{y}-{m}-{d}]') }}
          {{ zcfg.title }}
      

详情展示页参数获取
let id = this.$route.query.id;

                getRegulationListByid(){
                let id = this.$route.query.id;
                // console.log(this.$route.params.id)
                getRegulationListByid(this.pageInfo.currentPage,this.pageInfo.pageSize,id).then(res => {

                    this.listData = res.dataInfo.list;
                  // 遍历取出数据
                        res.dataInfo.list.forEach((element) => {
                            this.listData.content = element.content;
                            this.listData.title = element.title;
                            this.listData.fileNumber = element.fileNumber;

                        });

                });

            }

不带参数:
这儿要注意参数的传递赋值问题,从页面到方法的赋值
页面:@click = regulationRouter(zcfg)
方法:regulationRouter(val){
参数赋值params:{“id”:val.id}
}
列表点击页

        
          {{parseTime (zcfg.createdate,'[{y}-{m}-{d}]') }}
          {{ zcfg.title }}
        

详情展示页
let id = this.$route.params.id;

         getRegulationListByid(){
                let id = this.$route.params.id;
                // console.log(this.$route.params.id)
                getRegulationListByid(this.pageInfo.currentPage,this.pageInfo.pageSize,id).then(res => {

                    this.listData = res.dataInfo.list;
                  // 遍历取出数据
                        res.dataInfo.list.forEach((element) => {
                            this.listData.content = element.content;
                            this.listData.title = element.title;
                            this.listData.fileNumber = element.fileNumber;

                        });

                });

            }