前言
在前端开发中不可避免使用链接的参数等信息,那么咱就一起记录下各种获取的方法
一、原生获取
获取各种链接信息
window.location
对象获得当前页面的地址 (URL)
使用以下方式,获取 https://editor.csdn.net/md?not_checkout=1&articleId=131126631
对应值
location.href
当前页面访问路径,返回 “https://editor.csdn.net/md?not_checkout=1&articleId=131126631”location.hostname
web 主机的域名,返回"editor.csdn.net"location.pathname
当前页面的路径和文件名,返回"/md/"location.port
web 主机的端口 (80 或 443),返回
“”location.protocol
所使用的 web 协议(http: 或 https:),返回
“https:”location.search
路径查询参数,返回"?not_checkout=1&articleId=131126631"location.hash
当前位置的哈希。如果存在,则以“#”开头。
最常使用的是获取当前连接参数数据,可是原生并没有解析完对应的值,需要咱自个手动解析链接参数对对象
/**
* 获取链接参数为对象
*/
fun = (url) => {
const search = url.split('?')[1]
const searchArr = search.split('&')
let params = {
}
searchArr.forEach((item) => {
const param = item.split('=')
params[param[0]] = param[1]
})
console.log(params)
return params
}
fun(location.href);
链接跳页
直接替换 location.href
的值即可
例如 跳页 baidu.com
,直接 location.href = 'https://baidu.com'
即可。注意如果值跳页不同协议链接,需要带上web协议;同个协议内链接调整可直接替换为页面路径即可
正常开发经常遇到对象值需要转换为链接参数然后再进行跳页,例如把以下对象做为链接参数传值
const params = {
"articleId": "131126631",
"not_checkout": "1"
}
getParamsString = (params) => {
let urlSearch = ''
let connector = '?'
for(const x in params) {
urlSearch += `${
connector}${
x}=${
params[x]}`
connector = '&'
}
return urlSearch
}
console.log(getParamsString(params)) // ?articleId=131126631¬_checkout=1
页面刷新
执行 location.reload()
即可
二、Vue 获取
获取链接参数
1、使用 vue-router
获取(Vue3
),这种取值需要在 setup
或对应生命周期内执行才有效,否则会出现 undefined
import {
defineComponent } from 'vue'
import {
useRoute } from "vue-router"
export default defineComponent({
setup() {
const route = useRoute()
console.log(route)
return {
}
}
包含以下信息:
fullPath
链接路径名加上参数部分,即原生location.pathname
+location.search
hash
当前位置的哈希。如果存在,则以“#”开头。同location.hash
matched
包含组件的{@link 路由记录}数组,还包含重定向记录和对应的子路由等信息meta
简单来说就是路由元信息,也就是每个路由身上携带的信息。name
路由配置的名称params
路由配置参数,例如 { path:‘/user/:id’, name:“users”, …} 中的 idpath
链接路径名,同location.pathname
query
链接参数,对象格式redirectedFrom
重定向来源信息
2、如果是在setup之外(vue2、vue3
均可获取),例如hooks内需要获取则可使用获取路由配置文件来获取
import Vrouter from "@/router"
Vrouter.currentRoute.value.query // vue3
Vrouter.currentRoute.query // vue2
根据下图可看多,比上面的多了个 href
字段,同 fullPath
3、使用 this.$route
获取(vue2、3
均可使用,如果是3
需要在存在this的生命周期内使用),如图显示
...
created() {
console.log('this.$route', this.$route)
},
...
跳页操作
1、使用 this.$router.push()
获取(vue2、3
均可使用,如果是3
需要在存在this的生命周期内使用)
- 根据路由路径跳页
this.$router.push(path, query) // path:路由路径,query:参数信息
- 根据路由名称跳页,可结合路由配置赋值对应的
params
连接参数
this.$router.push(name, params) // name:路由名称,params:参数信息(需要结合路由配置)
this.$router.push('Register', {
id: '123456'})
// 路由配置如下:
{
path: '/register/:id',
name: 'Register',
component: () => import('@/views/home/register/index'),
},
2、使用导入 vue-router
跳页(Vue3
可用),同 useRoute
需要在 setup
或对应生命周期内执行才有效,否则会出现 undefined
。传值方式同第一点,可选路径名称或者路径地址跳页(常用方式)
import {
defineComponent } from 'vue'
import {
useRouter, type LocationQueryRaw } from "vue-router"
/**
*
* @param path 路由地址
* @param query 参数信息
*/
const goTo = (path: string, query: LocationQueryRaw = {
}) => {
const router = useRouter()
router.push({
path, query: query
})
}
export default defineComponent({
created() {
goTo('/')
},
setup() {
// goTo('/')
}
})