vue实现链接跳转

路由配置

在Vue项目中实现链接跳转通常使用Vue Router。需先在项目中安装并配置路由。通过vue-router库定义路由路径与组件的映射关系。

安装Vue Router：

npm install vue-router

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

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

声明式导航

使用<router-link>组件实现跳转，相当于HTML的<a>标签，但不会触发页面刷新。通过to属性指定目标路径。

示例：

<router-link to="/about">关于我们</router-link>

可通过active-class属性自定义激活状态的样式类名：

<router-link to="/about" active-class="active-link">关于</router-link>

编程式导航

在JavaScript代码中通过router.push()方法跳转。适用于按钮点击或条件触发场景。

示例：

methods: {
  navigateToAbout() {
    this.$router.push('/about')
  }
}

传递参数：

this.$router.push({ path: '/user', query: { id: '123' } })
// 或
this.$router.push({ name: 'user', params: { id: '123' } })

动态路由匹配

路由路径可包含动态参数，通过冒号:标记。组件内可通过$route.params访问参数。

路由配置：

{ path: '/user/:id', component: User }

组件内获取参数：

this.$route.params.id

导航守卫

通过路由守卫控制跳转逻辑，如权限验证。常用全局前置守卫beforeEach。

示例：

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

路由模式

支持两种历史模式：

• createWebHistory: 使用HTML5 History API（需服务器配置）
• createWebHashHistory: 使用URL hash（兼容性更好）

配置示例：

const router = createRouter({
  history: createWebHashHistory(),
  routes
})