当前位置：首页 > VUE

vue实现换页功能

2026-03-28 21:49:20VUE

Vue实现换页功能的方法

使用vue-router实现页面跳转

安装vue-router依赖包：

npm install vue-router

在项目中配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

在组件中使用路由链接进行跳转：

<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>

使用编程式导航

在方法中实现页面跳转：

methods: {
  goToHome() {
    this.$router.push('/')
  },
  goToAbout() {
    this.$router.push('/about')
  }
}

动态路由匹配

配置带参数的路由：

{
  path: '/user/:id',
  component: User
}

获取路由参数：

this.$route.params.id

路由嵌套

配置子路由：

{
  path: '/user/:id',
  component: User,
  children: [
    {
      path: 'profile',
      component: UserProfile
    }
  ]
}

路由守卫

全局前置守卫：

router.beforeEach((to, from, next) => {
  // 进行权限控制等操作
  next()
})

组件内守卫：

beforeRouteEnter(to, from, next) {
  // 在渲染该组件的对应路由被确认前调用
  next()
}

路由过渡效果

添加页面切换动画：

<transition name="fade">
  <router-view></router-view>
</transition>

CSS过渡样式：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

懒加载路由

优化性能的懒加载方式：

const User = () => import('./views/User.vue')

{
  path: '/user',
  component: User
}

路由元信息

定义路由元信息：

{
  path: '/admin',
  meta: { requiresAuth: true }
}

在导航守卫中使用：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 需要认证的逻辑
  }
  next()
})

滚动行为

自定义路由切换时的滚动位置：

vue实现换页功能

const router = new VueRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})