获得当前页面的地址 (URL)信息、跳页及刷新等（解析链接参数）

---

前言

在前端开发中不可避免使用链接的参数等信息，那么咱就一起记录下各种获取的方法

---

一、原生获取

获取各种链接信息

window.location 对象获得当前页面的地址 (URL)
使用以下方式，获取 https://editor.youkuaiyun.com/md?not_checkout=1&articleId=131126631对应值

• location.href 当前页面访问路径，返回 “https://editor.youkuaiyun.com/md?not_checkout=1&articleId=131126631”
• location.hostname web 主机的域名，返回"editor.youkuaiyun.com"
• 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&not_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”, …} 中的 id
• path 链接路径名，同 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('/')
  }
})