时间戳

首页 > 解决方案 > 如何链接到 SPA 网址？

vue.js - 如何链接到 SPA 网址？

问题描述

我有一个单页 Vue 应用程序，它使用 URL 的哈希历史记录（即https://www.myapp.com/#/sign-up）。我有另一个使用 Wagtail 作为 CMS 工具的网站，它试图使用锚标记链接到我的 vue spa，但它似乎不起作用。带有锚标签的网站是使用 jQuery 使用预制主题构建的。

<a class="btn btn-sm btn-primary transition-3d-hover" href="https://www.myapp.com/#/sign-up">

我希望单击该链接会将我带到我的注册页面，但没有任何反应，单击该链接时，我会在控制台日志中看到：

Uncaught Error: Syntax error, unrecognized expression: #/sign-up
    at Function.oe.error (jquery.min.a2530ed98bf8.js:2)
    at oe.tokenize (jquery.min.a2530ed98bf8.js:2)
    at oe.select (jquery.min.a2530ed98bf8.js:2)
    at Function.oe (jquery.min.a2530ed98bf8.js:2)
    at Function.e.find (jquery-migrate.min.05689c22f0c8.js:59)
    at w.fn.init.find (jquery.min.a2530ed98bf8.js:2)
    at e.fn.init.w.fn.init (jquery.min.a2530ed98bf8.js:2)
    at new e.fn.init (jquery-migrate.min.05689c22f0c8.js:43)
    at w (jquery.min.a2530ed98bf8.js:2)
    at HTMLAnchorElement.<anonymous> (scroll-nav.787831ada42e.js:16)

导航到 URL https://www.myapp.com/#/sign-up确实按预期工作，只是不是通过单击链接。我对前端开发比较陌生，并且对可能导致问题的原因感到迷茫。

标签： vue.jssingle-page-application

解决方案

不要使用 hashbang 导航，因为它自 2015 年以来已被弃用。而是使用 VueRouter 摆脱你的 hashbang 并配置你的服务器端应用程序以将所有路由重定向到/，让 Vue 处理路由。

const router = new VueRouter({
  mode: 'history'
})

推荐阅读