vue router 的声明式导航通过 组件实现无刷新跳转，支持 to 字符串路径、命名路由传参及自动高亮（router-link-active/router-link-exact-active），并可自定义类名与 query/params 两种传参方式。

Vue Router 的声明式导航，核心就是用 <router-link></router-link> 组件替代原生 <a></a> 标签来跳转，它不刷新页面，直接切换视图组件，同时自动处理高亮和历史记录。

基础写法：to 属性指定目标路径

在模板中写一个带 to 属性的 <router-link></router-link>，Vue Router 会把它渲染成 <a></a> 标签，并绑定点击事件实现 SPA 跳转：

• <router-link to="/home">首页</router-link> → 跳转到 /home 对应的组件
• <router-link to="/user/123">用户详情</router-link> → 匹配动态路由 /user/:id
• <router-link :to="{ name: 'Product', params: { id: 5 } }">商品5</router-link> → 用命名路由 + 参数跳转（需路由配置了 name）

自动高亮当前激活项

Vue Router 默认会给当前匹配的 <router-link></router-link> 添加 CSS 类，方便做样式区分：

灵活路由的PHP库

灵活路由的PHP库

下载

• router-link-active：模糊匹配，比如当前路径是 /goods/list，to="/goods" 的链接也会被加这个类
• router-link-exact-active：精确匹配，仅当路径完全一致（如 / 对应 to="/"）时才生效
• 可在 <style></style> 中自定义样式，例如：.router-link-exact-active { color: #007bff; font-weight: 600; }

自定义高亮类名（可选）

如果项目已有统一的导航类名规范，可以在创建 router 实例时改掉默认类：

• 在 router/index.js 中配置：linkActiveClass: 'nav-active' 和 linkExactActiveClass: 'nav-exact-active'
• 之后所有 <router-link></router-link> 就会使用你定义的类名，CSS 里写 .nav-active 即可生效

传参跳转（常见场景）

声明式导航支持两种主流传参方式，对应不同路由配置：

• 查询参数（query）：适用于筛选、分页等非关键参数
  <router-link to="/search?keyword=vue&page=2">搜索</router-link>
  或对象写法：:to="{ path: '/search', query: { keyword: 'vue', page: 2 } }"
• 动态参数（params）：适用于 ID、用户名等必须路径的一部分
  前提：路由配置为 { path: '/user/:id', name: 'User' }
  写法：:to="{ name: 'User', params: { id: 88 } }" → 最终 URL 是 /user/88

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！