vue让跳转路由参数不在地址栏显示
src/router/index.js:路由配置 配置nameexport default new Router({routes: [//发送的页面{path:'/chat',name:'chat',component: chat},//接收参数的页面注意这个name{path:'/taskCenter',name:'taskCenter',co
·
src/router/index.js:路由配置 配置name
export default new Router({
routes: [
//发送的页面
{
path:'/chat',
name:'chat',
component: chat
},
//接收参数的页面 注意这个name
{
path:'/taskCenter',
name:'taskCenter',
component: TaskCenter
}
]
})
- 跳转路由参数在地址栏显示 (path;query)
path方式跳转
//简写不传参
this.$router.push('/taskCenter')
//全写传参
this.$router.push({path:'/taskCenter',query:{name1:'1',name2:'2'}})
query获取传参
this.$route.query.name;
this.$route.query.name2;
- vue让跳转路由参数不在地址栏显示(name;param)
name方式跳转:push绑定的不再是path而是使用了你要发送的页面的name值
this.$router.push({name:'taskCenter', params:{id: ids, savePath: savePath}})
param获取传参:
mounted() {
this.requestIds=this.$route.params.id;
this.requestXmlPath=this.$route.params.savePath;
}
- 未搭配动态路由时导航栏时:不会在导航栏中显示传递的数据,也可以正常获得params中的数据,但是刷新页面 后会丢失params中传递的数据
- 设置动态路由后导航栏显示效果,就算刷新页面也不会丢失params中的数据,但同时也暴漏的传递的数据
//router配置
const routes = [{
path: '/chat/:id/:name',
name: 'Chat',
component: Chat
}]
- query传参相当于get方式,会把要传递的参数显示在导航栏中。
- params传参相当于post方式。默认不会把传递的参数显示在导航栏中。
- query跳转路由传参显示参数这对于普通数据没什么,但是对于敏感数据,比如 涉及到用户敏感信息 ,避免使用query。
- 我们可以用params方式传递参数,它不会把传递的参数显示到导航栏中。
更多推荐
已为社区贡献3条内容
所有评论(0)