我正在使用vue.js和vue-router。我正在努力实现以下目标:
我有一个带导航链接的顶部导航栏。其中一些是到其他客户端路由的链接,因此它们是基本的vue-router router-link
组件,除了需要指向同一页面上具有相同id
属性值的组件。
首先,我将其编码为HTML锚点元素a
,其中href
属性值等于目标组件的id
属性值。
或者,我尝试使用router-link
to
属性/
,主路径与href(id)值连接,因此,/#target_id
。
第一种方式在目标元素所在的路径上导致失败,有点显而易见。 第二种方式也不成功。它甚至在包含目标元素的路径上也不起作用,但是正确地更新了地址栏。它也不能通过仅在页面顶部的目标元素的路径上结束,从不包含目标元素的其他路径到达目标元素。
如何告诉vue-router不仅要到达路线并渲染相应的组件,还要跟随哈希部分并到达页面上的正确区域?
可能我可以根据当前路由有条件地将导航链接呈现为anchors
或router-link
,然后可以在目标上的vue组件生命周期方法上调用window.location
相关更改包含组件。或者只使用一些vue组件级别或应用级别路由挂钩。