vue怎么点击跳转页面

百变鹏仔 3个月前 (09-25) #VUE

文章标签跳转

如何在 vue 中点击跳转页面？使用 router-link 组件指定目标地址。在组件中直接使用 router-link 组件，如。可动态改变目标地址，如 this.$router.push('/about')。可携带参数，如。可使用导航守卫在路由跳转前/后执行自定义操

如何使用 Vue 点击跳转页面

在 Vue 中，可以使用 router-link 组件实现点击跳转页面。

语法

<router-link :to="目标地址"></router-link>

其中：

用法

在 Vue 组件中，直接使用 router-link 组件即可。例如：

立即学习“前端免费学习笔记（深入）”；

<template><div>    <router-link to="/about">去关于页面</router-link></div></template><script>export default {  name: 'Home',  // 省略其他代码};</script>

当用户点击具有 router-link 组件的元素时，将会触发路由跳转。

动态路由跳转

可以使用 JavaScript 动态改变目标地址：

this.$router.push('/about');

携带参数

可以通过 query 对象传递参数：

<router-link :to="{ path: '/about', query: { id: 123 }}"></router-link>

导航守卫

在路由跳转之前和之后可以执行一些自定义操作，称为导航守卫。可以使用 beforeEach 和 afterEach 钩子：

// beforeEach 全局导航守卫router.beforeEach((to, from, next) =&gt; {  // 在跳转之前执行一些操作});// afterEach 全局导航守卫router.afterEach((to, from) =&gt; {  // 在跳转之后执行一些操作});

文章推荐

vue怎么点击跳转页面

语法

用法

动态路由跳转

携带参数

导航守卫

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器