vue路由及路由钩子函数---vue-router

欢迎加我技术交流QQ群：811956471

一、vue-router是什么

通俗的说，vue-router就是WebApp的链接路径管理系统，本质就是建立起url和页面之间的映射关系。而舍弃了一般描点连接、用a链接去实现页面跳转的方法。

二、vue-router模式

1、Hash模式：

vue-router 默认是hash 模式，当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。

2、History模式：

hash模式会在url中自带#，可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

注意：种模式要玩好，还需要后台配置支持

三、解决没有匹配到页面出现404问题

//方法一：在路由规则如下代码，使其直接跳转到首页
{path: "*", redirect: "/"}
//方法二：做一个错误处理组件，跳转到这里
{ path:'*', component:Error}

四、vue-router使用方式

1.安装 npm i vue-router -S
2.在main.js中引入 import VueRouter from 'vue-router';
3:引用Vue.use(VueRouter);
4.在 router文件中index.js 中创建路由对象并配置路由规则 let router = new VueRouter({routes:[{path:'/home',component:Home}]});

五、$route（路由）和$router（路由器）的区别

1.$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数、就是配置的一堆路由规则、路径。
2.$router 是“路由实例”对象，即使用 new VueRouter创建的实例，包括了路由的跳转方法，钩子函数等，一堆路由规则、路径组成了路由器。

六、编程式导航(说白了就是用脚本业务逻辑实现页面跳转)

1.比如需要用程序控制跳转有以下方法：

（1）、字符串匹配跳转


html:
<button @click="gpto_foo">Go to Foo</button>
js:
methods: {
    gpto_foo:function () {
    this.$router.push('foo')//亲测 这种不支持name匹配,  这里的字符串是路径path，不是router配置里的name
    }
}
//这种方法如果需要传递参数：
//步骤一：
{
  path: "/Foo/:id",
  name: 'Fooa',
  component: Foo,
},
//步骤二：
this.$router.push('Foo/78')
//或者：
this.$router.push('Foo/'+this.userid)

（2）、对象方法

//第一 ：router配置里的name匹配跳转 
<button @click="gpto_foo">Go to Foo</button>
this.$router.push({ name: 'Fooa', params: { userId: "77" }})

//第二：router配置里的path匹配跳转 
<button @click="gpto_foo">Go to Foo</button>
this.$router.push({ path: 'Foo', query: { userId: this.userid }})

七、导航守卫

简介：主要是在导航跳转的时候做一些操作，比如可以做登录的拦截，而钩子函数根据其生效的范围可以分为：全局路由守卫、路由独享卫和组件内路由卫。

（1）、全局路由守卫：beforeEach、afterEach

-- 全局前置守卫beforeEach：

//在所有路由跳转之前、初始化执行
router.beforeEach((to, from, next) => {
const isLogin='判断用户是否登录的逻辑代码';
  if (to.meta.auth&&isLogin){
   next()
  }else{
   next({ name: 'Login' })
}
 // 如果该路由需要登录后访问，且用户未登录跳转登录页面
})

-- 全局后置守卫afterEach

//在所有路由初始化、跳转之后执行
router.afterEach((to, from) => {
  document.title=to.meta.title//设置每个页面的页面标题
})

（2）、路由独享守卫：beforeEnter，没有后置守卫

//用法同全局路由守卫：beforeEach
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

（3）、组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。这三个路由是在组件（页面中）使用。

//通过路由匹配规则，进入组件时调用
 beforeRouteEnter(to, from, next) {
    // 没有 `this`， 因为当守卫执行前，组件实例还没被创建
   const isLogin='判断用户是否登录的逻辑代码';
     if (to.meta.auth&&isLogin){
     next()
    }else{
     next({ name: 'Login' })
    }
    // 如果该路由需要登录后访问，且用户未登录跳转登录页面
  },

  // 在当前路由改变，但是该组件被复用时调用
  beforeRouteUpdate(to, from, next) {
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },

   // 通过路由匹配规则，离开组件时调用，一般用于提示用户是否离开当前页面，或者清除当前组件定时器等
  beforeRouteLeave(to, from, next) {
    // 可以访问组件实例 `this`
  }