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在根实例中注入路由：
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')在模板中使用 <router-link> 和 <router-view>：
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>动态路由与参数传递
定义动态路由：
const routes = [
{ path: '/user/:id', component: User }
]在组件中获取路由参数：
this.$route.params.id通过 props 传递参数：
const routes = [
{ path: '/user/:id', component: User, props: true }
]编程式导航
通过 this.$router 进行页面跳转：
this.$router.push('/about')
this.$router.push({ path: '/user', query: { id: '123' } })
this.$router.replace('/home') // 替换当前路由
this.$router.go(-1) // 返回上一页路由守卫控制页面切换
全局前置守卫：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})组件内守卫：
export default {
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被验证前调用
next()
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
next()
}
}过渡动画效果
为路由切换添加过渡效果：
<transition name="fade">
<router-view></router-view>
</transition>定义 CSS 过渡样式：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}嵌套路由
配置嵌套路由：
const routes = [
{
path: '/user',
component: User,
children: [
{ path: 'profile', component: Profile },
{ path: 'posts', component: Posts }
]
}
]在父组件中显示子路由：
<router-view></router-view>懒加载路由
按需加载路由组件：
const routes = [
{ path: '/about', component: () => import('./views/About.vue') }
]命名路由和命名视图
定义命名路由：
const routes = [
{ path: '/user', name: 'user', component: User }
]使用命名路由跳转：
this.$router.push({ name: 'user' })定义命名视图：
const routes = [
{
path: '/',
components: {
default: Home,
sidebar: Sidebar
}
}
]使用命名视图：
<router-view name="sidebar"></router-view>
<router-view></router-view>
