Navigo路由跳转异常：Spender费用管理应用路由配置求助

看起来你的路由跳转问题主要来自两个核心点：错误的启动脚本和未处理a标签的默认跳转行为，另外还有一些冗余依赖可以清理。我来一步步帮你解决：

1. 修正Package.json的启动脚本与依赖 #

你当前的start脚本用node index.js是后端Node.js项目的运行方式，但你的项目是前端单页应用，需要用Parcel来启动开发服务器。另外，express、body-parser、views这些是后端框架依赖，对你的前端应用完全没用，可以删掉，减少冗余。

修正后的package.json： #

{
  "name": "spender",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "handlebars": "^4.5.3",
    "navigo": "^7.1.2"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  }
}

然后重新安装依赖：

npm install

2. 处理路由跳转的默认行为 #

Navigo作为单页路由，需要接管页面跳转，而默认的a标签点击会触发页面刷新，导致路由失效。你需要阻止a标签的默认行为，改用Navigo的navigate方法处理跳转。

修改你的路由代码，添加全局点击监听： #

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);

// 处理a标签跳转，阻止默认行为
document.addEventListener('click', (e) => {
  const link = e.target.closest('a[data-navigo]');
  if (link) {
    e.preventDefault();
    router.navigate(link.getAttribute('href'));
  }
});

router
 .on('/', function () {
    let indexTemplate = Handlebars.compile(indexHtml)
    let indexTemplateRendered = indexTemplate({ fullname: 'test', allCategoriesCost: 2211 })
    document.querySelector('.js-app').innerHTML = indexTemplateRendered
 })
 .on('/categories/:id', ({ id }) => {
    console.log(id)
    let categoryTemplate = Handlebars.compile(categoryHtml)
    let categoryTemplateRendered = categoryTemplate({ category: { id: id, totalCost: 555 } })
    document.querySelector('.js-app').innerHTML = categoryTemplateRendered
 })
 .on('/expenses/add/:category', ({ category }) => {
    let expensesTemplate = Handlebars.compile(expensesHtml)
    let expensesTemplateRendered = expensesTemplate({ categories: { category: category } })
    console.log(expensesHtml)
    document.querySelector('.js-app').innerHTML = expensesTemplateRendered
 })
 .resolve();

然后在你的HTML模板中，给需要跳转的a标签加上data-navigo属性： #

比如在index.html的模板里：

<a href="/categories/1" data-navigo>查看分类1</a>
<a href="/expenses/add/Car" data-navigo>添加汽车费用</a>

这样点击这些链接时，就会由Navigo接管路由，不会刷新页面，正确渲染对应模板。

3. 验证基础配置 #

确保你的index.html中存在目标容器：

<div class="js-app"></div>
<script src="./index.js"></script>

Parcel会自动处理JS的打包和引入，不需要手动修改路径。

测试步骤 #

1. 运行npm start启动Parcel开发服务器，默认会打开http://localhost:1234
2. 点击页面上的导航链接，检查控制台是否打印对应路由参数，同时.js-app容器是否正确渲染对应模板

这样应该就能解决你的路由跳转问题了！

内容的提问来源于stack exchange，提问作者Luka Gutovic