Vue-login 案例的学习(二)

• vue-router的基础知识学习

  动态路由配置：

  1 2 3 4 5 6 7 8 9

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

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

​

监听路由变化：

1
2
3
4
5
6
7
8
9
10
11

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

​

编程式导航：

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

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

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

1
2
3
4
5
6
7

router.push('index');//跳转到index组件

router.push({path:'index'})

router.push({name:'user',params:{userid:123456}}) //<router-link to="/user/:userid">
//带查询参数，变成 /register?plan=private
router.push({path:'register',query:{plan:'private'}})

router.go(n)

在 history 记录中向前或者后退多少步：

1
2
3
4
5
6
7
8

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

​

重定向

​ 重定向是由route配置的，配置的方式四种：路径字符串，带名称的路由，带参数的路径字符串，方法(动态返回重定向目标)。

带参数的路径字符串：

1
2
3

const routes = [
  {path:'/user/:id',redirect:'/user-two/:id'}
]

方法：

1
2
3
4
5
6
7

const routes = [
  {path:'/user',redirect: to => {
    ...
    dosomething
    ....
  }}
]

​

钩子函数

​ router.beforeEach()函数用于路由跳转，比如登录时权限的判定，再跳转登录页面进行登录。首先注册一个全局的钩子：

1
2
3
4
5

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

钩子函数的三个参数：

​ to：目标路由，

​ from：即将要离开的路由

​ next：Function；一定要调用该方法来 resolve 这个钩子。

​ next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

​ next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

​ next(‘/‘) 或者 next({ path: ‘/‘ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

确保要调用 next 方法，否则钩子就不会被 resolved。

​

路由的meta字段

定义路由时可配置meta字段：

1
2
3
4
5
6
7
8
9

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      meta: { requiresAuth: true }
    }
  ]
})

meta字段出现的场景：用户登录登出 (这个案例里面用到的meta字段)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

router.beforeEach((to,from,next) => {
  if(to.meta.requireAuth){
      if(store.state.token){
        next();
      }else{
        next({
          path: '/login',
          query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
        })
      }
  }else{
      next();
  }
})

​

​

• vue-router的进阶知识

  数据获取

  ​ 1. 导航完成之后获取数据

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  export default { data(){ return { list:[] } }, created(){ //组件创建完后获取数据 this.getData(); }, watch:{ //监听路由变化，变化，执行该方法 '$route': 'getData' }, methods:{ getData(){ ... this.list = data ... } } }

  ​ 2. 导航完成之前获取数据

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

  export default { data(){ return { list:[] } }, beforeRouteEnter (to, from, next) { getData(to.params.id, (err, data) => if (err) { next(false) } else { next(vm => { vm.list = data }) } }) }, watch:{ //监听路由变化，变化，执行该方法 $route(){ getData(this.$route.params.id, (err, data) => { if (err) { next(false) } else { next(vm => { vm.list = data }) } }) } }, }

  路由信息对象

  ​ 路由信息对象是不可变的，每次导航成功后就会产生一个新的对象，

  ​ 路由信息对象出现的场景：

  • 组件内的 this.$route 和 $route watcher 回调（监测变化处理）;
  • beforeEach()函数的参数 to和from

​ 路由信息对象的常用属性：

      1. **$route.path：**

​ 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。

​ 2.$route.params

​ 一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是 一个空对象。

​ 3.$route.query

​ 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

​ 4.$route.fullPath

​ String类型 完成解析后的 URL，包含查询参数和 hash 的完整路径。

​

demo地址：

vue-router简单案例

参考

源码

vue-router 实现分析