为什么使用命名路由？

使用路由时，一般会先在routes属性中配置路由匹配规则，然后在页面中使用<router-link>的to属性跳转到指定目标地址。但这种方式存在一些弊端，例如，当目标地址比较复杂时，不便于记忆；当地址发生变化时，需要同步修改所有使用了该地址的代码，会增加开发的工作量。为此，Vue Router提供了命名路由。

在定义路由匹配规则时，使用name属性为路由匹配规则定义路由名称，即可实现命名路由。当路由匹配规则有了路由名称后，在定义路由链接或执行某些跳转操作时，可以直接通过路由名称表示相应的路由，不再需要通过路由路径表示相应的路由。

使用命名路由的语法格式如下。

{ path: '路由路径', name: '路由名称', component: 组件 }

注意：

命名路由的name属性值不能重复，必须保证是唯一的。

在<router-link>标签中使用命名路由时，需要动态绑定to属性的值为对象。当使用对象作为to属性的值时，to前面要加一个冒号，表示使用v-bind指令进行绑定。在对象中，通过name属性指定要跳转到的路由名称，使用params属性指定跳转时携带的路由参数，语法格式如下。

<router-link :to="{ name: 路由名称, params: { 参数名: 参数值 } }"></router-link>

使用命名路由实现单击Home组件的“跳转到MovieDetails组件”链接跳转到MovieDetails组件，并在页面中获取id值。

演示如何使用命名路由

在src\components\Home.vue文件中的<router-link>标签中动态绑定to属性的值，指定要跳转到的路由名称，并传递参数。

<template>
  <div class="home-container">
   <h3>Home组件</h3>
   <router-link :to="{ name: 'MovieDetails', params: { id: 3 } }">跳转到MovieDetails组件</router-link>
  </div>
</template>

在src\router.js文件中，将“:id”路径的路由名称定义为MovieDetails。

{ path: ':id', name: 'MovieDetails', component: () => import ('./components/movieDetails.vue'), props: true }
//定义路由名称

在浏览器中访问http://127.0.0.1:5173/。单击“首页”链接后的页面效果、单击“跳转到MovieDetails组件”链接后的页面效果，如下图所示。