router-link：导航链接 / 声明式导航、跳转传参

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

router-link 本质还是 a 标签

router-link 功能：

① 能跳转，配置 to 属性指定路径（必须），本质还是 a 标签，to 无需 #

② 能高亮，默认就会提供 高亮类名，可以直接设置高亮样式

 

router-link 会自动给当前导航添加两个类名：router-link-active（模糊匹配，用的比较多）、router-link-exact-active（精确匹配）

 

代码演示：

修改前：

      <a   href = " #/find " > 发现音乐 </a>

      <a   href = " #/my " > 我的音乐 </a>

修改后：

      <router-link   to = " /find " > 发现音乐 </router-link>

      <router-link   to = " /my " > 我的音乐 </router-link>

 

在 style 标签里给 router-link 设置导航高亮：

<style>

a.router-link-active {

  background-color: #bfd7e1;

}

</style>

或者（推荐用上一个）

<style>

a.router-link-exact-active {

  background-color: #bfd7e1;

}

</style>

 

 ---------------------------------------------------------------------------------------------------------------------------

 

router-link 跳转传参：

应用场景：在跳转路由时 进行传参

 

语法：

方法一 ：查询参数传参：

① 语法格式：  to = " /path ? 参数名 = 值 & 参数名2 = 值2 "

② 对应页面组件接收传递过来的值：  $route.query.参数名

            eg：<p> 搜索关键字：{{ $route.query.username }} </p>

    在 mounted () 或 created () 中如果要获取路由参数，需要通过  this.$route.query.参数名   来获取

 

方法二 ：动态路由传参：

① 配置动态路由

const router = new VueRouter({

  routes: [

    { path: ' /search/:words ' ,  component: Search },

  ]

})

② 配置导航链接：  to = " /path/参数值 " （eg：to = " /search/黑马程序员 "）

③ 对应页面组件接收传递过来的值：  $route.params.参数名

      eg：  $route.params.words （words这里是看第①步是什么路由）

                {{ $route.params.words }}   →   黑马程序员

 

 动态路由传参的注意点： /search/:words 表示 必须要传参数。如果不传参数，也希望匹配，可以加个可选符 " ? "

      eg：{ path: ' /search/:words? ' ,  component: Search }