vue实现点击页面切换
实现页面切换的基本方法
在Vue中实现点击页面切换功能，可以通过Vue Router来实现。Vue Router是Vue.js官方的路由管理器，用于构建单页面应用（SPA）。
安装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实现导航
在模板中使用<router-link>组件创建导航链接：
<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>编程式导航
通过方法调用实现页面切换：
methods: {
goToHome() {
this.$router.push('/')
},
goToAbout() {
this.$router.push('/about')
}
}在模板中绑定点击事件：
<button @click="goToHome">Home</button>
<button @click="goToAbout">About</button>动态路由匹配
实现带参数的路由切换：
const routes = [
{ path: '/user/:id', component: User }
]导航到带参数的路由：
this.$router.push('/user/123')路由传参
通过props传递参数：
const routes = [
{ path: '/user/:id', component: User, props: true }
]在目标组件中接收参数：
export default {
props: ['id']
}路由守卫
实现导航控制：
router.beforeEach((to, from, next) => {
// 执行逻辑
next()
})命名路由
使用命名路由简化导航：
const routes = [
{ path: '/user/:id', name: 'user', component: User }
]导航到命名路由：
this.$router.push({ name: 'user', params: { id: 123 } })嵌套路由
实现嵌套视图：
const routes = [
{
path: '/user/:id',
component: User,
children: [
{ path: 'profile', component: Profile },
{ path: 'posts', component: Posts }
]
}
]路由过渡效果
为路由切换添加动画：
<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')
const routes = [
{ path: '/user', component: User }
]滚动行为控制
自定义路由切换时的滚动位置：
const router = new VueRouter({
routes,
scrollBehavior(to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
