Vue路由-命名路由

1.什么是命名路由

在使用路由的时候，一般会在router对象中配置路由的path属性，在页面中使用<router-link>标签的to属性去跳转目标URL。

这种显式引用的路径一旦改变，所有引用的地方都需要进行相应的修改，增加了开发的工作量。

为此，vue-router提供了一种隐式的引用路径，即命名路由，可以在创建Router实例的时候，在routes中给某个路由设置名称name值。

通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，通过路由的名称取代路径地址直接使用。

像这种命名路由的方式，无论path多长、多烦琐，都能直接通过name来引用，十分方便

2.命名路由案例

Vue

<div id="app">
<router-link :to="{name:'user',params:{id:123}}">登录</router-link>
<router-view></router-view>
</div>

//创建user组件
var user={
  template:'<h3>我是user组件</h3>'
  created(){
   console.log(this.$route)
}
}
//创建路由对象
var router = new VueRouter({
    routes:[{
     path:'/user/:id',
     name:'user',
     component: user
}]
})

var vn = new Vue({el:'#app',router})

浏览量 8