Vue Router 命名路由

明月清风徐徐

已于 2024-05-02 14:04:11 修改

阅读量1.3k

点赞数 5

文章标签： vue.js 前端

于 2024-05-02 14:00:48 首次发布

本文链接：https://blog.csdn.net/qq_40930841/article/details/138390903

版权

一、为什么要使用命名路由

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

二、命名路由的语法

2.1使用name属性定义路由匹配规则

在定义路由匹配规则时，使用name属性为路由匹配规则定义路由名称，即可实现命名路由。命名路由的name属性值不能重复，必须保证是唯一的。

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

2.2在<router-link>标签中使用命名路由

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

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

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

三、命名路由的代码演示

本文代码是在Vue Router 动态路由-CSDN博客的基础上进行修改的。

3.1在router.js中使用name属性定义路由匹配规则

import { createRouter, createWebHashHistory } from "vue-router"
import Movie from "./components/Movie.vue"

// // 创建路由实例对象
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        // { path: '/movie/:id', component: Movie, props: true },
        { path: '/movie/:id', name:'MovieName' , component: Movie, props: true },
    ]
})
// 导出路由实例对象
export default router

3.2在App.vue文件的<router-link>标签中使用命名路由

<template>
  <div class="app-container">
    <h3>App根组件</h3>
    <!-- <router-link to="/movie/1">电影1</router-link>
    <router-link to="/movie/2">电影2</router-link>
    <router-link to="/movie/3">电影3</router-link> -->
    <router-link :to="{name:'MovieName', params:{id:1}}">电影1</router-link>
    <router-link :to="{name:'MovieName', params:{id:2}}">电影2</router-link>
    <router-link :to="{name:'MovieName', params:{id:3}}">电影3</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>


<style scoped>
.app-container {
  text-align: center;
  font-size: 16px;
}

.app-container a {
  padding: 10px;
  color: #000;
}

/* 为激活的路由链接设置高亮模式 */
.app-container a.router-link-active {
  color: #fff;
  background-color: #bb1212;
}
</style>