Vue-router路由之命名路由

命名路由

有些情况 使用一个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>