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>
