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

Question

I have a Vue based site where I use Vue Router, but I have some problems with it. What I try to create is when the user clicks the a button it navigates back to the first page to a specific anchor.

I tried to use the Vue build in Scroll Behavior, but it is not working, It only navigates back to the main page, but not to the specific anchor.

I also tried this way to solve the issue: https://dev.to/napoleon039/the-lesser-known-amazing-things-vuerouter-can-do-25di

Here is my router file:

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 }
    }
})

This the how I use the router link:

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

I also tried this way:

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

And this is where I want to navigate:

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

Answer 1

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

{ path: '/something', params: { foo: 'bar'}}