vue-03-路由-name属性

在初识路由这篇博文中，讲到了注册路由的方法，那时候讲的是 一个对象中只存在两个属性，分别是代表路径的 path 、以及代表组件的 component ，现在，可以在对象内部增加一个属性，那就是 name。这个 name 属性的意义就在于，我们可以使用这个name 属性来动态的绑定 当前路由，而不是只能跳转固定的 path路径，也就是说，我一旦 给某个路由设置了 name  属性，那么我在跳转路由的时候，如果是通过绑定的 name 属性值 进行跳转，而不是根据绑定的 path 路径来跳转的话，那么，我的跳转就可以是动态的了，即使这个路由的 path 更改了，我的 name也是指向当前更改后的路由

 //配置路由
const routes = [
  { path: '/', name:"indexLink", component: Home },
  { path: '/menu', name:"menuLink", component: Menu },
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/admin', component: Admin },
  { path: '/about', component: About },
  { path: '*', redirect:  "/menu" },
]

当我们在定义了 name 属性之后，我们可以使用 绑定的方法 v-bind： 或者 ：来在 router-link 的 to 属性中，绑定该路径

<template>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
           <ul class="navbar-nav">
               <li>
                   <router-link :to="{name : 'indexLink'}" class="nav-link" >主页</router-link>
                </li>
               <li>
                   <router-link :to="{name : 'menuLink'}" class="nav-link" >菜单</router-link>
                 </li>
               <li>
                   <router-link to="admin" class="nav-link">管理</router-link>
                </li>
               <li>
                   <router-link to="about" class="nav-link">关于我们</router-link>
                </li>       
           </ul>
           <ul class="navbar-nav ml-auto">
               <li>
                   <router-link to="login" class="nav-link">登录</router-link>
                </li>
               <li>
                   <router-link to="register" class="nav-link">注册</router-link>
                </li>
           </ul>
        </nav>
    </header>
</template>