vue升级之路之vue-router的使用教程

如果使用 v-bind 指令，还可以在 to 后面接变量，配合 v-for 指令可以渲染路由菜单

如果需要传入不同参数 ，可以在路由中添加动态参数，给 to 传入一个对象

{
 path: item.url,
 query: { id: '007' }
}

然后还可以使用

$ route.query.id

四、编程式导航

然而在实际项目下，有很多链接在执行跳转之前，还会执行方法对数据进行处理，这时可以使用 this.$router.push(location) 来修改 url 完成跳转

// 绑定goLogin
<button class="login" @click="goLogin"></button>
// 定义goLogin
methods: {
    goLogin() {
      this.routes.push('/login')
    }
  },

push 后面可以是对象，也可以是字符串：

// 字符串
this.$router.push('/index')
// 对象
this.$router.push({ path: '/index' })
// 命名的路由
this.$router.push({ name: 'login', params: { userId: '123' }})