vue实现转页面
实现页面跳转的方法
在Vue中实现页面跳转可以通过多种方式，包括使用Vue Router的内置方法和原生JavaScript方法。以下是几种常见的方法：
使用Vue Router的router-link组件
<router-link to="/about">跳转到关于页面</router-link>使用Vue Router的编程式导航
// 跳转到指定路径
this.$router.push('/about')
// 带参数跳转
this.$router.push({ path: '/user', query: { id: '123' } })
// 命名路由跳转
this.$router.push({ name: 'user', params: { userId: '123' } })替换当前路由（不保留历史记录）
this.$router.replace('/home')前进或后退指定步数
// 后退一步
this.$router.go(-1)
// 前进两步
this.$router.go(2)动态路由匹配
对于需要根据参数动态跳转的页面，可以配置动态路由：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})跳转到动态路由：
this.$router.push('/user/123')在目标组件中获取参数：
this.$route.params.id // 输出 '123'路由守卫控制跳转
可以在跳转前添加验证逻辑：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})路由懒加载优化
对于大型应用，可以使用懒加载提高性能：
const User = () => import('./views/User.vue')
const router = new VueRouter({
routes: [
{ path: '/user', component: User }
]
})命名视图实现复杂布局
需要同时显示多个视图时：
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Home,
sidebar: Sidebar
}
}
]
})对应的模板：
<router-view></router-view>
<router-view name="sidebar"></router-view>
