vue实现页面内部跳转
路由配置
在Vue项目中实现页面内部跳转通常依赖于Vue Router。需要在router/index.js中配置路由表，定义路径与组件的映射关系。例如：
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]声明式导航
使用<router-link>组件创建导航链接，通过to属性指定目标路径。这种方式会渲染为<a>标签但不会触发页面刷新：
<router-link to="/home">首页</router-link>
<router-link :to="{ path: '/about' }">关于</router-link>编程式导航
通过this.$router.push()方法在JavaScript中控制跳转逻辑，适合在按钮点击或异步操作后跳转：
methods: {
navigateToHome() {
this.$router.push('/home')
},
navigateWithQuery() {
this.$router.push({ path: '/about', query: { id: 123 } })
}
}动态路由匹配
需要在路由配置中使用冒号标记动态路径参数，组件内可通过this.$route.params获取参数值：
// 路由配置
{ path: '/user/:id', component: User }
// 组件内获取
const userId = this.$route.params.id命名路由
为路由配置添加name属性后，可通过名称进行跳转，避免硬编码路径：
// 配置
{ path: '/settings', name: 'settings', component: Settings }
// 使用
this.$router.push({ name: 'settings' })路由守卫
通过全局或路由独享的守卫控制跳转行为，例如验证用户权限：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})路由传参
除URL参数外，可通过props配置使路由组件更灵活地接收参数：
// 路由配置
{ path: '/profile', component: Profile, props: { default: true } }
// 组件定义
export default {
props: ['id'],
created() {
console.log(this.id)
}
}滚动行为
在路由配置中自定义页面跳转后的滚动位置，提升用户体验：
const router = new VueRouter({
scrollBehavior(to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
