Vue-router路由之命名路由_router 同一个name-CSDN博客

本文介绍了在Vue框架中如何使用命名路由简化路由管理和链接创建。通过为路由分配唯一名称，开发者可以更灵活地导航至不同页面，提高代码可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

命名路由

有些情况使用一个name名称来标识一个路由会比path更加的方便，所以在定义route的时候可以添加一个name属性

       routes:[
         {name:'register',path:'/register',component:reg},
            {name:'login',path:'/login',component: log}
        ]

相应的链接到这个路由 router-link中的to属性不再传递一个路径

  <router-link :to="{name:'login'}">登录</router-link>
  <router-link :to="{name:'register'}">注册</router-link>

这种方式也会把路由导航到/register 和/login

完整代码如下

<div id="first">
    <router-link :to="{name:'login'}">登录</router-link>
    <router-link :to="{name:'register'}">注册</router-link>
    <router-view></router-view>
</div>


<script>
    let reg={
        template:`<div>我是注册组件</div>`
    };
    let log={
        template:`<div>我是登录组件</div>`
    };

    let routerObj=new VueRouter({
        routes:[
            {name:'register',path:'/register',component:reg},
            {name:'login',path:'/login',component: log}
        ]
    });
    let vm=new Vue({
        el:"#first",
        router:routerObj
    })

</script>