vue路由

前端路由和后端路由，前端渲染和后端渲染

1. 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

2. 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

vue-router和koa-router的区别

前端路由.png

vue-router前端路由原理：前端路由主要模式：hash模式和history模式。

前端路由原理.png

page页面代码

// app.vue
<template>
 <div id="app">
  <button @click="linkToHome">首页</button>
  <button @click="linkToAbout">关于</button>
  <router-view></router-view>
 </div>
</template>

<script>
 export default {
     name: 'App',
     methods: {
         linkToHome() {
             this.$router.push('/home')
         },
         linkToAbout() {
             this.$router.push('/about')
         }
     }
 }
//router.js
{
  path:'/user/:id',
  component:User
}
//page.vue
  <div>
    <h2>{{$route.params.id}}</h2>
  </div>
</script>

传递参数的方式，主要有params和query2种

params的类型：

1. 配置路由方式：/router/:id

2. 传递的方式：在path后面跟着对应的值

3. 传递后形成的路径：/router/123

<router-link :to="{path: '/profile'}">用户</router-link>
userClick() {
    this.$router.push('/user/' + this.userId)
}
btnClick() {
    this.$router.push({
     path: '/user',
     params: {
          name: '小鲁班'
     }
    })
}
需要注意的是，使用params传值的话，目标页面刷新后就会丢失params的值。如果要保留的话，可在router.js中配置目标页面的path
{
        path: 'user/:id',
        name: 'user',
        meta: {
          title: '参数'
        },
        component: () => import('@/views/argu.vue'),
}

router是有区别的

获取参数通过route，并且当路由切换时，路由对象会被更新。

query的类型：

1.配置路由格式：/router也是普通配置

2.传递方式，对象中使用query的key作为传递方式

3.传递后形成的路径，router?id=123,/router?id=abc

btnClick() {
    this.$router.push({
     path: '/user',
     query: {
         name: '小提莫'
     }
    })
}
//获取
this.$route.query.name

1.全局路由钩子：router.beforeEach 注册一个全局前置守卫

to:Route，即将要进入的目标路由对象

from:Route，当前导航正要离开的路由

next:Function，一定要调用该方法来resolve这个钩子。

router.beforeEach((to, from, next) => {
    //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
  console.log('beforeEach')
  console.log(to,from)
  //
  next()
})
//
router.afterEach((to, from) => {
    //会在任意路由跳转后执行
  console.log('afterEach')
})

单个路由钩子：

只有beforeEnter，在进入前执行，to参数就是当前路由

 routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]

路由组件钩子

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

附：完整的导航解析流程

1.导航被触发。
2.在失活的组件里调用离开守卫。
3.调用全局的 beforeEach 守卫。
4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5.在路由配置里调用 beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里调用 beforeRouteEnter。
8.调用全局的 beforeResolve 守卫 (2.5+)。
9.导航被确认。
10.调用全局的 afterEach 钩子。
11.触发 DOM 更新。
12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

2、路由元信息

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

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