задний план
Путь 1:
Пожалуйста, нажмите test. to /driver-reg i…
Путь 2:
Пожалуйста, нажмите test. to /driver-reg i…
Ссылку какого формата вы обычно используете, путь 1 или путь 2? ? ? ?
Я всегда использовал путь 2, но недавно была онлайн-ошибка😭😭😭. Причина этой ошибки также вызвана неправильной траекторией Когда это мое лицо, кто я и где я? ? ? ?
состав URL
Часть протокола, часть имени домена, часть порта, часть виртуального каталога, часть имени файла, часть параметра, часть привязки
注：端口不是一个URl必须的部分，如果省略端口部分，将采用默认端口。
Я считаю, что все знают каждую часть URL-адреса очень хорошо. Просто упомяните об этом здесь, чтобы не тратить чужое время.
Проблемы, возникающие при использовании
Вопрос 1:
[Путь 1] и [Путь 2] могут нормально открывать страницу, в чем разница между ними и кто является каноническим URL-адресом?
[Путь 1] Якорная секция
[Путь 2] Анкерная часть
通过控制台的输出，我们发现两个路径打印出来的参数部分和锚部分是不一样，为啥？ ?
Якорная часть URL-адреса начинается с «#» и заканчивается в конце, которые являются якорными частями. Якорная часть не является обязательной частью URL-адреса.
Параметрическая часть URL-адреса начинается с «?» и заканчивается «#». Часть параметров также не является обязательной частью URL-адреса.
Согласно определению части параметра URL и части привязки, а также результатам вывода консоли, мы можем сделать вывод, что [путь 1] соответствует URL-адресу спецификации.
Вопрос 2:
Из вопроса 1 делается вывод, что [путь 1] — это путь, соответствующий спецификации URL. Но в процессе разработки я обнаружил, что проблема возникла снова, не могу получить параметры с помощью this.$route.query? Добавьте код на страницу (ниже)
created() {
console.log('*******************')
console.log('this.$route.query.hmsr:'+this.$route.query.hmsr)
console.log('window.location.search:'+window.location.search)
console.log('*******************')
}
Просмотр результатов печати
[Путь 1]:
** Зачем? ? ?
Я проверил соответствующие документы vue router, и этому нет объяснения, я думаю, что это должно быть обработано внутри vue router.
Вопрос в том, как нам получить параметры в проекте?
Напишите общий метод для получения параметров:
function getUrlParam(key) {
var url = window.location.href;
var startIndex = url.indexOf('?');
var params = {};
if (startIndex > -1) {
var str = url.substring(startIndex + 1);
var arr = str.split('&');
for (var i = 0; i < arr.length; i++) {
var kv = arr[i].split('=');
if (kv[1].indexOf('#') > -1) {
kv[1] = kv[1].substring(0, kv[1].indexOf('#'));
}
params[kv[0]] = kv[1];
}
}
return params[key];
}
【Путь 1】
【Путь 2】
注意：在传统模式开发中，如果在url中search与hash同时存在，你的hash值一定要放在search后面。
Вопрос 3:
С помощью описанного выше метода получения параметров как [Путь 1], так и [Путь 2] могут получить соответствующие параметры.На этот раз проблем нет, но воображение прекрасно, а реальность жестока.
Реальность такова, что когда страница h5 помещается в приложение, к настроенному пути добавляются некоторые параметры. Разработчики приложений добавляют правила, добавляя параметры перед разделом привязки. Но если наша страница использует vue-router для перехода на страницу и одновременного добавления параметров, в URL-адресе будет двойное "?". Можно ли получить параметры?
Что делать, если параметры следующего вопросительного знака не могут быть получены?
Вариант 1. Оптимизируйте функцию сбора параметров, чтобы она могла получать параметры с несколькими вопросительными знаками.
function getUrlAllParam(...args) {
if (args.length === 0) return undefined
const url = decodeURIComponent(window.location.href)
const reg = args.length === 1
? new RegExp(`[&?]${args[0]}=([^&%#]+)`)
: new RegExp(`[&?](?:${args.join('|')})=([^&%#]+)`)
const matchArray = url.match(reg)
return matchArray === null ? undefined : matchArray[1]
}
передача:
this.getUrlAllParam('hmsr') //获取参数的key
Решение 2. Перейти без использования vue router. Перед прыжком сращиваем путь по которому нужно прыгать, а потом прыгаем, чтобы в пути не было двойных приветственных вопросов.
fomartUrl(url,params,hash){
// url 是访问路径 字符串(不包含参数部分和锚部分的)
// params 参数是数组[{name:'hmsr',value:'1222'}]
if(!url){
return false;
}
let query = '';
if(params && params.length>0){
let queryAttr =[];
for(let i =0;params.length>i;i++){
queryAttr.push(params[i].name + '=' +params[i].value)
}
query = queryAttr.join('&')
}
if(hash){
return url + '?' + query + '#/' + hash
} else {
return url + '?' + query
}
}
передача:
const goHref = this.fomartUrl(
'http://localhost:8080/',
[{name:'hmsr',value:'2222'},{name:'aaa',value:'11'}],
'outsideIndex')
window.location.href = goHref
Суммировать:
Это некоторые проблемы, связанные с частью параметра URL и частью привязки, возникшие в процессе разработки, и их собственные решения. Если у вас есть лучшее решение, пожалуйста, оставьте сообщение для руководства и обмена.