小编tal*_*ash的帖子

如何使用路由器链接滚动到特定锚点?

我正在尝试使用 vue js 开发一个简单的网站,到目前为止一切顺利,但我面临以下问题:

我正在使用路由器来更改页面,它可以工作,但我需要做的是:更改页面并滚动到特定锚点。

我已经尝试过的:

效果很好:路由到联系页面或主页

<router-link to="/contact">Contact</router-link>
<router-link to="/">Home</router-link>
Run Code Online (Sandbox Code Playgroud)

不起作用:

<router-link :to="{ name: '/', hash: '#technology' }" >Technology</router-link>
Run Code Online (Sandbox Code Playgroud)

最后一个仅在我位于主页时才有效,但每当我更改为“联系页面”并尝试路由到“/#technology”时,它就不起作用。它确实尝试路由到“ http://example.com/contact/#technology ”而不是“ http://example.com/#technology ”。

如果我这样做,它只会滚动到顶部,但不会滚动到锚点:

<router-link to="/#technology" Technology</router-link>
Run Code Online (Sandbox Code Playgroud)

我的路由器代码:

const routes = [
    { path: '/', component: Home },
{ path: '/contact', component: Contact }
]

const router = new VueRouter({
     mode: 'history',

     routes,
       scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition;

        }

         if (to.hash) {
            return { selector: to.hash };
        }
    return { x: 0, y: 0 …
Run Code Online (Sandbox Code Playgroud)

vue.js vue-router

2
推荐指数
1
解决办法
7543
查看次数

标签 统计

vue-router ×1

vue.js ×1