vue路由器和锚点

npm install vue-router@4

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];

const router = createRouter({
history: createWebHistory(),
routes,
});

export default router;

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

<div id="section1">Section 1</div>
<div id="section2">Section 2</div>

const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash,
behavior: 'smooth',
};
}
return { top: 0 };
},
});