在Vue中，路由(router)的声明式导航有什么作用

一、为什么在vue中不使用a标签作为跳转，而是去使用路由中的router-link组件？

1、vue-router提供了一个全局组件 router-link

2、router-link实质上最终会渲染成a链接，并且它的to属性等价于a标签的href属性(to无需#)

3、router-link提供了声明式导航高亮的功能(自带类名)

总结：

1.1、那router-link是什么？

VueRouter在全局注册的组件，本质就是a标签

1.2、router-link怎么用？

当标签使用，但是必须传入to属性，指定路由路径值

1.3、使用router-link有什么好处？

自带激活时的类名，可以做高亮

二、声明式导航是否可以给路由页面传值？

答案肯定是可以的，在跳转路由时，可以给路由对应的组件内传值，并且传值的方式有两种。

第一种方式：

1、在router-link上的to属性传值，语法格如下：

/path?参数名=值

2、对应页面组件接收传递过来的值方式：

$route.query.参数名

<template>
  <div>
    <router-link to="/find">发现音乐</router-link>
    |
    <router-link to="/my">我的音乐</router-link>
    |
    <router-link to="/friend?name=小芳">朋友</router-link>
    <router-view></router-view>
  </div>
</template>
​
<script>
export default {}
</script>
​
<style scoped></style>

<template>
  <div>
    <h1>朋友:{{ $route.query.name }}</h1>
  </div>
</template>
​
<script>
export default {}
</script>
​
<style scoped></style>

第二种方式：

1、在router-link上的to属性传值，语法格如下：

/path/值

2、/path值 ——需要路由对象提供配置path: "/path/:参数名"

3、对应页面组件接收传递过来的值方式：

$route.params.参数名

<template>
  <div>
    <router-link to="/find">发现音乐</router-link>
    |
    <!-- 方式二：三步 -->
    <router-link to="/my/平凡之路">我的音乐</router-link>
    |
    <!-- 方式一：两步 -->
    <router-link to="/friend?name=小芳">朋友</router-link>
    <router-view></router-view>
  </div>
</template>
​
<script>
export default {}
</script>
​
<style scoped></style>

import Vue from 'vue'
import VueRouter from 'vue-router'
​
import Find from './views/find.vue'
​
// 注册
Vue.use(VueRouter)
​
// 配置，新建暴露
export default new VueRouter({
  routes: [
    {
      path: '/find',
      // 对应加载的组件
      component: Find,
    },
    {
      path: '/my/:song', // 动态路由
      // 对应加载的组件
      component: () => import('./views/my.vue'),
    },
    {
      path: '/friend',
      // 对应加载的组件
      component: () => import('./views/friend.vue'),
    },
  ],
})

<template>
  <div>
    <h1>我的音乐：{{ $route.params.song }}</h1>
  </div>
</template>
​
<script>
export default {}
</script>
​
<style scoped></style>

总结:

1、声明式导航跳转时, 如何传值给路由页面?

1.1、to="/path?参数名=值"

1.2、to=“/path/值” (需在路由规则里配置/path/:参数名)

2、如何接收路由传值?

2.1、$route.query.参数名

2.2、$route.params.参数名

三、声明式导航参数也可以实现可传可不传

只需在上面的案例中修改to属性为动态属性，并且属性值也要修改，同时路由配置也要修改path属性，修改如下：

<router-link :to="`/my/${song}`">我的音乐</router-link>

{
    // 需求：参数如何做到可传可不传。答：可以在参数后面加一个?号
    path: '/my/:song?',
    // 对应加载的组件
    component: () => import('./views/my.vue'),
},