Vue-路由-声明式导航

news2025/1/24 5:44:52

1. 导航链接

vue-router 提供了一个全局组件 router-link (取代 a 标签)

能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签，to 无需 #
能高亮，默认就会提供高亮类名，可以直接设置高亮样式

如：

<div class="footer_wrap">
  <!-- 配置导航，配置路由出口 -->
  <router-link to="/find">发现音乐</router-link>
  <router-link to="/my">我的音乐</router-link>
  <router-link to="/friend">朋友</router-link>
</div>

2. 高亮的两个类名

我们发现 router-link 自动给当前导航添加了两个高亮类名
在这里插入图片描述

router-link-active：模糊匹配 (用的多)
to=“/my” 可以匹配 /my /my/a /my/b …
router-link-exact-active：精确匹配
to=“/my” 仅可以匹配 /my

修改类名：router-link 的两个高亮类名太长了，我们希望能定制怎么办？

通过路由设置，如下：

const router = new VueRouter({
  routes: [...],
  linkActiveClass: "类名1", // 自定义模糊匹配类名
  linkExactActiveClass: "类名2" // 自定义精确匹配类名
})

效果如下：
在这里插入图片描述

3. 跳转传参

两个情况：

3.1 查询参数传参

传参：

to="/path?参数名1=值1&参数名2=值2"

接收参数：对应页面组件接收传参数

$route.query.参数名

3.2 动态路由传参

传参：

配置动态路由 - 格式：（:key）

const router = new VueRouter({
  routes: [
    ...,
    {
      path: '/search/:words?', //如果不传参数，也希望匹配，可以加个可选符 "?",如：这里的words后面的 ？
      component: Search
    }
  ]
})