Vue 3中的页面跳转方法

无界猴

7个月前更新

064244

在Vue 3中，实现页面跳转通常依赖于Vue Router，这是一个官方的路由管理器，为单页面应用（SPA）提供了强大的路由功能。以下是Vue 3中几种常见的页面跳转方法：

1. 使用`<router-link>`组件

<router-link>是Vue Router提供的一个组件，用于在应用中创建导航链接。它会被渲染为一个<a>标签，但会在内部处理路由的跳转，而不是像普通的<a>标签那样进行完整的页面刷新。


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

在上面的例子中，点击“Home”或“About”链接将分别导航到/home和/about路径。

2. 编程式导航

除了使用<router-link>进行声明式导航外，Vue Router还提供了编程式导航的方法，允许你在JavaScript代码中直接控制路由的跳转。

使用`this.$router.push`

在Vue组件中，你可以通过this.$router.push方法来导航到不同的URL。这个方法返回一个Promise，因此你可以处理异步操作或捕获错误。


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

注意，this.$router.push也可以接受一个对象作为参数，其中可以包含path、name（路由的名称，需要在路由配置中定义）、query（URL查询参数）和params（路由参数）等属性。

使用`this.$router.replace`

this.$router.replace与this.$router.push类似，但它不会向history添加新记录，而是替换当前的记录。这意味着用户不能使用浏览器的后退按钮回到之前的页面。


methods: {  
  replaceToHome() {  
    this.$router.replace('/home');  
  }  
}
methods: {  
  replaceToHome() {  
    this.$router.replace('/home');  
  }  
}
methods: {  
  replaceToHome() {  
    this.$router.replace('/home');  
  }  
}

3. 在Vue 3的Composition API中使用路由

在Vue 3的Composition API中，你可以通过useRouter和useRoute钩子来访问路由实例和当前路由信息。


import { useRouter } from 'vue-router';  
  
export default {  
  setup() {  
    const router = useRouter();  
  
    function goToHome() {  
      router.push('/home');  
    }  
  
    return {  
      goToHome  
    };  
  }  
};
import { useRouter } from 'vue-router';  
  
export default {  
  setup() {  
    const router = useRouter();  
  
    function goToHome() {  
      router.push('/home');  
    }  
  
    return {  
      goToHome  
    };  
  }  
};
import { useRouter } from 'vue-router';  
  
export default {  
  setup() {  
    const router = useRouter();  
  
    function goToHome() {  
      router.push('/home');  
    }  
  
    return {  
      goToHome  
    };  
  }  
};

在这个例子中，我们使用了useRouter钩子来获取路由实例，并通过router.push方法实现页面跳转。

4. 处理路由守卫

在Vue Router中，你还可以使用路由守卫来在导航之前或之后执行某些操作。例如，你可以在全局前置守卫中检查用户是否已登录，如果未登录则重定向到登录页面。


router.beforeEach((to, from, next) => {  
  // 假设我们有一个isAuthenticated函数来检查用户是否已登录  
  if (!isAuthenticated()) {  
    next('/login');  
  } else {  
    next();  
  }  
});
router.beforeEach((to, from, next) => {  
  // 假设我们有一个isAuthenticated函数来检查用户是否已登录  
  if (!isAuthenticated()) {  
    next('/login');  
  } else {  
    next();  
  }  
});
router.beforeEach((to, from, next) => {  
  // 假设我们有一个isAuthenticated函数来检查用户是否已登录  
  if (!isAuthenticated()) {  
    next('/login');  
  } else {  
    next();  
  }  
});