Проблема с роутером Navi go, он не будет перемещаться между маршрутами - PullRequest
Новая
       20

Проблема с роутером Navi go, он не будет перемещаться между маршрутами

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

Я хочу создать приложение Spender для добавления и проверки расходов. Я использую Handlebars как Javascript Template Engine with Parcel. У меня есть 3 индекса "страниц". html, категория. html и расходы. html, также у меня есть один (root) div с именем: "js -app", и мне нужно сделать все html содержание в этом единственном div. Также мне нужно перемещаться между этими страницами, и эта часть не будет работать должным образом или я что-то пропустил? 

import Navigo from 'navigo'

import Handlebars from 'handlebars'

import indexHtml from './views/partials/index.html'
import categoryHtml from './views/partials/category.html'
import expensesHtml from './views/partials/expenses.html'

let root = null;
let useHash = true;
let router = new Navigo(root, useHash);

router
  .on('/', function () {

    let indexTemplate = Handlebars.compile(indexHtml)
    let indexTemplateRendered = indexTemplate({
        fullname: 'tets',
        allCategoriesCost: 2211

    })
    //console.log(indexHtml)

    document.querySelector('.js-app').innerHTML = indexTemplateRendered

  })
  .on('/categories/:id', ({ id }) => {
      console.log(id)
    let categoryTemplate = Handlebars.compile(categoryHtml)
    let categoryTemplateRendered = categoryTemplate({
        category: {
            id: 1,
            totalCost: 555
        }
    })
//console.log(categoryHtml)
    document.querySelector('.js-app').innerHTML = categoryTemplateRendered
  })
  .on('/expenses/add/:category', ({ category }) => {//ovde treba da se napravi prolaz za do rute za kategoriju, kad se klikne na neku kategoriju 
    let expensesTemplate = Handlebars.compile(expensesHtml)
    let expensesTemplateRendered = expensesTemplate({
      categories: {
        category: "Car"
      }

    })
    console.log(expensesHtml)
    document.querySelector('.js-app').innerHTML = expensesTemplateRendered
  })
  .resolve();

пакет. json

{
  "name": "spender",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "ha": "0.0.17",
    "handlebars": "^4.5.3",
    "navigo": "^7.1.2",
    "views": "^1.0.2"
  }
}

1 Ответ

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

А пока я нашел решение. Сразу видно, что я новичок :) Ключ в га sh (#). Он имеет значение true let useHash = true; Мне просто нужно было добавить это ха sh к URL, например: http://localhost: 1234 / # / Categories /: 432

надеюсь, это кому-нибудь поможет.

...