Question

我有一个使用Vue路由器的基于Vue的站点，但是我有一些问题。我尝试创建的是当用户单击a按钮时，它会导航回到首页到特定锚点。

我尝试在Scroll Behavior中使用Vue构建，但是它不起作用，它仅导航回到主页，而不导航到特定锚点。

我也尝试过这种方法来解决问题：https://dev.to/napoleon039/the-lesser-known-amazing-things-vuerouter-can-do-25di

这是我的路由器文件：

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '@/components/home'
import works from '@/components/works'

Vue.use(VueRouter)

export default new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: home
        },
        {
            path: '/works',
            name: 'works',
            component: works
        },
    ],
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        }
        if (to.hash) {
            return { selector: to.hash }
        }
        return { x: 0, y: 0 }
    }
})

这是我如何使用路由器链接：

<router-link :to="'/#main-page'">

我也尝试过这种方式：

<router-link :to="{ path: '/', hash:'#main-page' }">

这是我要导航的地方：

<section class="intro" id="main-page">
  <div class="intro--left">
    <img />
  </div>
</section>

Answer 1

只需将参数添加到nuxt-link的：to =或this。$ router.push（）中，如下所示：

Assert.assertEquals(actualText, expectedText);

Vue JS路由问题-滚动行为无法正常工作

1 个答案: