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;
});
});
}