vue实现单页面跳转

Vue 实现单页面跳转的方法

在 Vue 中实现单页面跳转（SPA）通常使用 Vue Router。以下是几种常见的实现方式：

使用 <router-link> 组件

通过 Vue Router 提供的 <router-link> 组件实现导航：

<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>

to 属性指定目标路由路径，点击时会自动切换视图而不刷新页面。

编程式导航

通过 this.$router.push 方法在 JavaScript 中实现跳转：

methods: {
  goToHome() {
    this.$router.push('/home');
  },
  goToAbout() {
    this.$router.push({ path: '/about' });
  }
}

也可以传递命名路由或带参数的路由：

this.$router.push({ name: 'user', params: { id: 123 } });

路由配置示例

在 router/index.js 中配置路由：

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: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

动态路由匹配

通过冒号 : 标记动态路径参数：

routes: [
  {
    path: '/user/:id',
    component: User
  }
]

在组件中通过 this.$route.params.id 获取参数。

嵌套路由

使用 children 属性实现嵌套路由：

routes: [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: 'profile',
        component: Profile
      },
      {
        path: 'posts',
        component: Posts
      }
    ]
  }
]

路由守卫

通过路由守卫控制导航：

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

路由懒加载

使用动态导入实现路由懒加载：

const User = () => import('@/views/User.vue');

routes: [
  {
    path: '/user',
    component: User
  }
]

路由模式

可选择 hash 或 history 模式：

export default new Router({
  mode: 'history',
  routes: [...]
});

hash 模式使用 URL hash（默认），history 模式依赖 HTML5 History API。

命名视图

通过命名视图同时展示多个组件：

<router-view name="sidebar"></router-view>
<router-view></router-view>

路由配置：

routes: [
  {
    path: '/',
    components: {
      default: Main,
      sidebar: Sidebar
    }
  }
]

以上方法涵盖了 Vue 单页面应用中最常见的路由跳转实现方式，可根据具体需求选择合适的方法。