Vue-login 案例的学习(二)

Vue-login 案例的学习(二)

---

• vue-router的基础知识学习

  动态路由配置：

  const User = {
  template:'<div>{
       {$route.params.id}}</div>'
  }
  
  const router = new Router({
  routes:[
    {path:'/user/:id',component:User} //动态传递参数
  ]
  })

  路径传递参数是由:来标记的，其中当跳转到另一个路由且带有参数，参数值会被设置到$route.params里。

  ​

  监听路由变化：

  const User = {
  template:'<div>{
       {$route.params.id}}</div>',
  watch:{
    '$route'(to,from){
      //监听路由变化
      ...
      dosomething
      ...
    }
  }
  }

  ​

  编程式导航：

  我们除了可以通过来定义跳转链接，其实还可以通过router.push(location)实现路由跳转。使用router.push()方法，这个方法会向history栈中添加一个新的记录。

  其实当你点击，其内部就会调用router.push()方法。最终结果一样，只是表示方式不一致而已。

  该方法传递进的参数，可以是字符串，或者是对象。

  router.push('index');//跳转到index组件
  
  router.push({path:'index'})
  
  router.push({name: