用 Vue Router 的 hash 模式如何实现锚点?

① 首先,在 Vue Router 的路由配置中,需要将 mode 设置为 hash

const router = new VueRouter({
  mode: 'hash',
  routes: [] // 路由配置
})

② 在页面跳转时,使用 router.push 方法进行路由跳转,设置目标 URL 的 hash 部分为锚点的名称

    toRegister() {
      this.$router.push('/register?type=2#applicationMsg')
    },

③ 在目标组件中,可以使用 Vue 的生命周期函数 mounted 来获取目标描点的 DOM 元素,并使用
scrollIntoView方法将其滚动到视图中

  mounted() {
    const ref = this.$refs.applicationMsg
    if (ref) {
      ref.scrollIntoView()
    }
  }

这样,当路由跳转到目标页面时,页面会自动滚动到指定的锚点位置。 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-router路由模式有三种:哈希模式hash mode)、历史模式(history mode)和抽象模式(abstract mode)。 1. 哈希模式:默认使用的路由模式,通过改变URL中的hash值来进行路由的切换。例如:http://example.com/#/home。 实现方式:通过监听URL中hash值变化的事件,当hash值改变时,动态渲染相应的组件内容。 原理:浏览器会将hash值的变化当作页面的锚点变化来处理,不会重新发送请求,而是通过监听hashchange事件来更新URL对应的视图。 2. 历史模式:通过修改URL的路径来进行路由的切换,去除URL中的hash值。例如:http://example.com/home。 实现方式:通过HTML5的history API(pushState和replaceState方法)来修改URL路径并将路由信息保存在浏览器的history栈中。同时需要配合服务器端的配置,将所有的URL请求都指向根页面。 原理:history API可以修改URL路径并保持在浏览器的历史记录中,当URL发生改变时,浏览器会发送请求到服务器,服务器通过配置将所有的URL请求都指向根页面,然后由vue-router解析路由信息并呈现对应的视图。 3. 抽象模式:不依赖于浏览器的URL,可以将路由信息保存在任意位置,并通过切换路由信息来改变页面内容。 实现方式:通过自定义路由器(Router)和路由(Route)对象来管理路由状态,并通过编程方式来切换路由信息。 原理:抽象模式不依赖于浏览器的URL,可以将路由信息保存在任意位置,例如内存或者状态管理库中。通过切换路由信息,可以触发相应的组件渲染。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值