vue实现换页功能

Vue实现换页功能的方法

使用vue-router实现页面跳转

安装vue-router并配置路由：

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

在组件中使用编程式导航：

methods: {
  goToAboutPage() {
    this.$router.push('/about')
  }
}

使用动态组件实现页面切换

通过<component>标签和is属性实现组件切换：

<template>
  <div>
    <button @click="currentComponent = 'Home'">首页</button>
    <button @click="currentComponent = 'About'">关于</button>
    <component :is="currentComponent"/>
  </div>
</template>

<script>
import Home from './Home.vue'
import About from './About.vue'

export default {
  components: { Home, About },
  data() {
    return {
      currentComponent: 'Home'
    }
  }
}
</script>

使用keep-alive缓存页面状态

在切换页面时保持组件状态：

<keep-alive>
  <component :is="currentComponent"/>
</keep-alive>

实现分页功能

对于数据分页，可以使用计算属性：

computed: {
  paginatedItems() {
    const start = (this.currentPage - 1) * this.itemsPerPage
    const end = start + this.itemsPerPage
    return this.items.slice(start, end)
  }
}

使用第三方分页组件

例如使用element-ui的分页组件：

<el-pagination
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="pageSize"
  :total="total">
</el-pagination>

路由守卫控制页面切换

可以使用路由守卫进行权限控制：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

动画过渡效果

为页面切换添加过渡动画：

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

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