Как сделать ссылки, работающие как реальные в истории API? - PullRequest
Новая
       0

Как сделать ссылки, работающие как реальные в истории API?

0 голосов
/ 16 января 2020

Я пытаюсь сделать ванильную JavaScript маршрутизацию с использованием истории API. Я пытался использовать этот метод history.pushState(), чтобы изменить свои URL, и он работает и переименовывает мои URL, как я хочу, но он не работает, когда я обновляю sh мою страницу

это Пример фрагмента с использованием firebase, но я думаю, что он не будет работать должным образом без локального запуска с live server для генерации URL-адресов локального хоста: 

//? start config genrated by firebase app ?//
var firebaseConfig = {
    apiKey: "AIzaSyAFN-KRpzvA4Aup1FBtq6BRfaVl_ErkxpE",
    authDomain: "zeeda-f3f19.firebaseapp.com",
    databaseURL: "https://zeeda-f3f19.firebaseio.com",
    projectId: "zeeda-f3f19",
    storageBucket: "zeeda-f3f19.appspot.com",
    messagingSenderId: "295957581266",
    appId: "1:295957581266:web:e52b40b525f249a3"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
//? end genrated by firebase app ?//

//? referance vriable ?//
const db = firebase.firestore();

const auth = firebase.auth()


/* start app  */

const title = document.getElementById('title')
const content = document.getElementById('content')
const blo1 = document.getElementById('blo1')
const blo2 = document.getElementById('blo2')
const blo3 = document.getElementById('blo3')

let blogid = '1';

blo1.addEventListener('click', ()=>{
  blog('1');
})
blo2.addEventListener('click', ()=>{
  blog('2')
})
blo3.addEventListener('click', ()=>{
  blog('3')
})


function  blog(blogid){
  db.collection('blog').doc(blogid).get().then(snap =>{
    const titleData = snap.data().title;
    const contentData = snap.data().content;
      title.innerHTML = titleData;
      content.innerHTML = contentData;
      history.pushState({name:"blog"},'',`blog${blogid}`)
  })
}

  db.collection('blog').doc(blogid).get().then(snap =>{
    const titleData = snap.data().title
    const contentData = snap.data().content
      title.innerHTML = titleData
      content.innerHTML = contentData
  })
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-firestore.js"></script>

    <title>Document</title>
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
        }

        li {
            margin: 10px;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <nav>
        <ul>
            <button id="blo1">blog1</button>
            <button id="blo2">blog2</button>
            <button id="blo3">blog3</button>
        </ul>
    </nav>


<h1 id="title"></h1>
<p id="content"></p>

</body>

</html>

Может кто-нибудь помочь мне, что я пропустил? Я прочитал эту статью , и он предоставил работающий пример демо он использовал jquery, но я не знаком с этим.

1 Ответ

1 голос
/ 16 января 2020

При нажатии на ссылку JavaScript используется, чтобы вызвать две вещи:

  • Документ преобразован в другое состояние
  • Новый URL-адрес помещается в историю

(JavaScript также предотвращает нормальное поведение ссылки (загрузка новой страницы)).

Вставив URL-адрес в историю, вы фактически вступаете в силу делая заявление, что URL представляет документ, в который вы преобразовали страницу.

Таким образом, чтобы сделать это реальностью, вам нужно, чтобы сервер для этого URL обслуживал документ HTML, который даст вам это состояние.

Это означает, что вам необходимо:

  • Создать документ в его окончательном состоянии для каждого URL с сервера
  • Сгенерируйте документ в его окончательном состоянии для каждого URL со стороны клиента JavaScript

Это можно сделать с помощью страниц со статикой c, созданных вручную, или с повышением уровня сгенерированного программным способом stati c страниц или сервера стороннее программирование.

Да, это обычно требует много работы . Хотя pushState сам по себе быстрый и простой, он не очень полезен без большой работы, проделанной вокруг него.

Вы можете уменьшить много усилий, используя общие шаблоны или создавая страницы вокруг фреймворки вроде Next. JS, которые выполняют рендеринг клиентского кода на стороне сервера.

Некоторые люди предпочитают обслуживать один и тот же скелет HTML документа для каждого URL и загружать весь контент с помощью JavaScript… но это ломается, если JS терпит неудачу и не является хорошей пищей для поисковых систем.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...