获得当前页面的地址 (URL)信息、跳页及刷新等（解析链接参数）
文章目录
前言一、原生获取获取各种链接信息链接跳页页面刷新
二、Vue 获取获取链接参数跳页操作
前言
在前端开发中不可避免使用链接的参数等信息，那么咱就一起记录下各种获取的方法
一、原生获取
获取各种链接信息
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.searchhash 当前位置的哈希。如果存在，则以“#”开头。同 location.hashmatched 包含组件的｛@link 路由记录｝数组，还包含重定向记录和对应的子路由等信息meta 简单来说就是路由元信息,也就是每个路由身上携带的信息。name 路由配置的名称params 路由配置参数，例如 { path:‘/user/:id’, name:“users”, …} 中的 idpath 链接路径名，同 location.pathnamequery 链接参数，对象格式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('/')
}
})