首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
liudaqi
V2EX  ›  JavaScript

vue, ng 这些都喜欢在 URL 中用 # 号区分路由,和页面锚点也是 # 冲突,怎么办呢?

  •  
  •   liudaqi · 220 天前 · 1986 次点击
    这是一个创建于 220 天前的主题,其中的信息可能已经有所发展或是发生改变。
    也许是习惯的原因,看到 URL 中间夹个 # 感觉 URL 是要断掉了,/ 斜杠已经隔断了一层,# 再断一次,看起来不舒服
    10 回复  |  直到 2019-08-01 10:21:51 +08:00
    shintendo
        1
    shintendo   220 天前   ♥ 2
    不是它们“喜欢”,就是因为#是锚点才用它的。
    因为 url 锚点后面的部分改变不会引起页面重新请求,这正是单页应用做前端路由需要的特性。
    你想用常规 url 的话,可以用 History Mode,但就需要后端的配合。
    anthoy
        2
    anthoy   220 天前   ♥ 1
    楼上对的,可以开启 History Mode 模式
    reeco
        3
    reeco   220 天前 via Android   ♥ 1
    有些场景下我已经不用前端路由了,全改为后端路由
    learnshare
        4
    learnshare   220 天前   ♥ 1
    用 # 首先是为了改变 URL,方便借用浏览器的历史记录机制。
    同时为了避免给服务器带来麻烦,因为通常服务器不支持单页应用,导致首页之外的路径 404。
    以及需要避免浏览器对页面重新发起请求

    当然也可以使用正常的路径,需要服务器做一些调整,页面刷新也可能会带来更多麻烦
    liudaqi
        5
    liudaqi   220 天前 via Android
    @shintendo
    @anthoy
    @reeco
    @learnshare

    感谢!那如果要在 URL 中使用传统的锚点功能,是不是必须要修改后端路由的匹配方式?否则 两个 # 会导致后一个失效吧?
    also24
        6
    also24   220 天前
    @liudaqi #5 我直接搜索 『 vue 锚点』似乎可以搜到大量的解决方案啊?
    flowfire
        8
    flowfire   179 天前
    可以使用 history api,目前几大框架都有可以配置使用
    如果要考虑兼容性可以看这里 https://caniuse.com/#search=history
    另外,后端兼容也简单。把 404 页面全部重定向到 index.html 就行了
    flowfire
        9
    flowfire   179 天前
    @liudaqi #5 如果我没记错的话锚点数据是不会被传递到服务器的。。
    Sapp
        10
    Sapp   177 天前
    @liudaqi 后端把所有页面请求(除了后端打算自己接管的)都转发到 / 去就行了,路由全部交给前端来处理,这样就不需要 # 了
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1841 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 25ms · UTC 07:37 · PVG 15:37 · LAX 23:37 · JFK 02:37
    ♥ Do have faith in what you're doing.