vue开发 - 获取url后面的参数(路由传参与非路由传参)
1.使用路由获取页面参数在路由中设置path:{path: '/detail/:id/',name: 'detail',component: detail,meta: {title: '详情'}}获取参数let id = this.$route.params.id备注:1、参数名需要保持一致2、如果路由中没...
·
一、使用路由获取页面参数
1.方法一
// router文件
{
path: '/merchant/:brandId',
name: 'merchant',
meta: {
title: "详情",
},
component: () => import('@/pages/merchants/merchant')
},
//brand.brandId为后台获取的id
<router-link :to="`/merchant/${brand.brandId}`">
<div class="rightDiscount">
</div>
</router-link>
// 取值this.$route.params.brandId
2.方法二
<div class="Rt_right" @click="toSHdetail"></div>
methods:{
toSHdetail() {
this.$router.push({
path: "/sellDetail",
query: {
clicked: this.clicked
}
});
},
}
// 取值this.$route.query.clicked
温馨提示:
备注:
1、参数名需要保持一致
2、如果路由中没有传参(http://192.168.1.10:8080/#/detail),会报错,页面无法显示,正常页面为 http://192.168.1.10:8080/#/detail/234
如果有的参数可传可不传,可以使用?传参
例如:http://192.168.1.10:8080/#/detail/?id=123
获取的时候:
let id = this.$route.query.id
这样即使取不到参数,页面也不会报错
二、使用js获取页面参数
方法一:
应用场景:可用于与app交互时,获取app方传递过来的token等数据
如果是在普通js文件中,想获取url后面的参数,可以新建一个工具类,utils.js:
/* eslint-disable */
export default{
getUrlKey: function (name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
}
}
在其他需要获取参数的js中引入
import Vue from 'vue'
import utils from '../libs/utils'
// Vue.prototype.$utils = utils // main.js中全局引入
let id = utils.getUrlKey('id')
console.log(id)
url为http://192.168.1.10:8080/#/detail/?id=123时,可以得到id为123
方法二:
应用场景:可用于与app交互时,获取app方传递过来的token等数据
跟app方确认传递的方法名称(自己随意),getToken();
data() {
return {
// 控制遮罩层的显示隐藏
show: false,
// 获取app传过来的用户token
TOKEN: ""
};
},
mounted() {
// 页面数据已完全渲染完成 获取用户token
// this.TOKEN = getToken();
// console.log(TOKEN);
},
稍等一下,路由中可配置…
此处为路由懒加载模式component: () => import("@/pages/index/sellDetail")
{
path: "/sellDetail",
name: "sellDetail",
meta: { title: "销售明细" },
component: () => import("@/pages/index/sellDetail")
}
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
});
// 设置后,页面title就为meta: { title: "销售明细" }所设置的title了。
更多推荐
已为社区贡献5条内容
所有评论(0)