vue实现导航跳转

vue实现导航跳转的方法

使用 <router-link> 组件

在 Vue 中，可以通过 <router-link> 组件实现导航跳转。这种方式适用于模板中直接声明式导航。

<router-link to="/home">首页</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">用户页</router-link>

to 属性可以是一个字符串路径，也可以是一个包含路由名称或参数的对象。

编程式导航

通过 this.$router.push 方法可以在 JavaScript 中实现编程式导航。

// 跳转到指定路径
this.$router.push('/home');

// 跳转到命名路由
this.$router.push({ name: 'user', params: { userId: 123 } });

// 带查询参数
this.$router.push({ path: '/search', query: { keyword: 'vue' } });

替换当前路由

使用 this.$router.replace 方法可以替换当前路由，不会在历史记录中留下痕迹。

this.$router.replace('/login');

前进或后退

通过 this.$router.go 方法可以在历史记录中前进或后退。

// 后退一步
this.$router.go(-1);

// 前进一步
this.$router.go(1);

路由传参

可以通过 params 或 query 传递参数。

// 使用 params
this.$router.push({ name: 'user', params: { userId: 123 } });

// 使用 query
this.$router.push({ path: '/user', query: { userId: 123 } });

在目标组件中，可以通过 this.$route.params 或 this.$route.query 获取参数。

// 获取 params
const userId = this.$route.params.userId;

// 获取 query
const userId = this.$route.query.userId;

动态路由匹配

在路由配置中定义动态路径参数。

const routes = [
  { path: '/user/:userId', component: User }
];

在组件中可以通过 this.$route.params.userId 获取动态参数。

导航守卫

可以通过导航守卫控制导航跳转。

router.beforeEach((to, from, next) => {
  if (to.path === '/admin' && !isAdmin) {
    next('/login');
  } else {
    next();
  }
});

懒加载路由

通过动态导入实现路由懒加载，优化性能。

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

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