vue-router一些常见问题

import  store  from  ' ./vuex/store '

import  cookie  from  ' ./libs/cookie '

router.beforeEach((to, from, next) => {
    console.log('测试')
    next('/order')
})

// 路由预先判断

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

  // 首先判断是否已有用户登录信息userInfo

  if ( store . state . user . info)  {

     next()

   }  else  {

    // 强制给index.html 加上时间戳

     if ( document . URL . indexOf( ' index.html?t= ')  <  0)  {

       let  timestamp  = ( new  Date()) . valueOf()

       window . location . href  =  ' /index.html?t= '  +  timestamp  +  ' # '  +  to . fullPath

     }

     let  ua  =  window . navigator . userAgent . toLowerCase()

    // 判断微信客户端

     if ( ua . indexOf( ' micromessenger ')  >  1)  {

      // 首先获取授权cookie authid

       let  authid  =  cookie . get( ' authid ')

       if ( authid)  {

         Vue . http . post( ' /index.php/weixin/Auth/auth ' ,  { authid :  authid }) . then( ( response )  =>  {

           let  res  =  response . data

           if ( res . code  ===  ' 04 ')  {

             cookie . del( ' authid ')

             window . location . href  =  ' 404.html '

           }  else  if ( res . code  ===  ' 01 ')  {

             store . dispatch( ' setUserInfo ' ,  res . userInfo)

             next()

           }

         },  ( response )  =>  {})

       }  else  {

        // 强制跳转，授权登录，并设置cookie

         window . location . href  =  ' /index.php/weixin/Auth/redirect?redirect= '  +  encodeURIComponent( document . URL)

       }

     }  else  {

      //  非微信客户端

       Vue . http . post( ' /index.php/weixin/Auth/auth ' ,  {openid :  cookie . get( ' openid ') }) . then( ( response )  =>  {

         let  res  =  response . data

         if ( res . code  ===  ' 04 ')  {

           cookie . del( ' authid ')

           next()

           // window.location.href = '/index.php/weixin/Auth/redirect?redirect=' + encodeURIComponent(document.URL)

         }  else  if ( res . code  ===  ' 01 ')  {

           store . dispatch( ' setUserInfo ' ,  res . userInfo)

           next()

         }

       },  ( response )  =>  {})

     }

   }

})

vue-router

1. $route 和 $router的区别？

$router 是router（路由）实例；$route 是一个对象，可以访问path，name等属性。还有就是route object 是只读的，不可变的，所以我们不能更改其中的值。

2. router.replace 和 router.push 的区别？

前一个不会记录路由到history栈里，后一个会，回退的时候，根据记录进行回退。还有router.go(n)（n为number类型，可以负） 来实现页面前进和回退。这里也可以使用history.go 或者history.forward() (前进，相当于history.go(1)) 和history.back() (后退，相当于history.go(-1));

//当我们嵌套的路由比较深的时候，可以使用这个来解决。
let len = history.length;
history.go(-(len-1));
// 首页 history.length 长度为 1；

3. 在router-link怎么实现router.push,router.replace,router.append的效果？

上面介绍了push和replace的区别，append是在前一个路由上在添加的子路由，就像路由里的children,如从a页面（/a）跳转到b页面(路由/b),如果添加append属性，那么b就是a的子路由，访问路径为/a/b;

//append 和 replace 默认为false，（push默认true，记录路由）如果想设置不记录路由，或者添加子路由，改变其boolean值即可，如下就是设置其值为true的方式；

<router-link to='/a' replace></router-link>

<router-link to='/a' append></router-link>

4. $route.params 和 $roue.query 的区别？ （还有一个$route.hash）

// 1.显示的方式不一样

// $route.params url显示 /user/123  
// $routr.query url显示 /user/id=123 

// 在router-link中显示形态

<router-link :to={path:'/a', query:{id:123}}></router-link>
<router-link :to={name:'a', params:{id:123}}></router-link>
// 如果使用 params 就不能写 path 路径（写了也访问不到），可以配置name来匹配路径

5. 我们在匹配动态路由的时候，也可以匹配多个参数/msg/:id:orderId,参数是一一对应的，在写对应的路由时，要注意。

6. 懒加载，实现的原理是vue的异步组件和webpack代码分割功能，webpack是根据import来进行代码分割的，vue的组件是异步加载的，我们可以import组件，来实现代码的分割，同时实现异步加载。（这里有两种加载方式，实现的结果是一致的，唯一的区别，一个可以设置打包文件的包名，一个是webpack自动添加的）

import Vue from 'vue'
import Router from 'router'
Vue.use(Router)

// require();

const a = reslove => {
        require(['../components/index.vue'],reslove)
    }
// 文件名webpack自动生成
export default new Router({
  routes: [
    {
      path: '/',
      component: a
    }
  ]
})    

// require.ensure();
const r = a => {
        require.ensure([],() => a(require('../components/index.vue')),'index')
    }
// 这个组件会打包成为一个名为index.js的文件。
export default new Router({
  routes: [
    {
      path: '/',
      component: a
    }
  ]
}) 

一般加载方式为这两种，如果对require和require.ensure不熟悉的话，可以参考这里;

7. 对路由导航信息流程(参考vuejs-router官网)

触发路由 --> 离开当前组件，进入下一个组件前(组件失活状态)

--> 可以调用全局守卫beforeEach守卫（可以在这个守卫里我们开启一个新页面的loading,注意，这个守卫是在全局调用的）

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'

Vue.use(Router)

const Router = new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    }
  ]
}) 

//beforeEach
Router.beforeEach(to,from,next){
    // do something
    next()
}

//afterEach
Router.afterEach(to,from,next){
    // do something
    next()
}

export default Router

参考 vux 使用该守卫实现页面加载前loading

--> 如果在重用的组件里调用，如果有beforeRouteUpdate这个守卫，就会调用（2.2+ 以上版本，比如我们列表页根据id跳转到详情页，详情页组件的复用；注意，这个是在组件里调用）

 export default {
    data(){
        return {}
    },
    beforeRouteUpdate(to,form,next){
        // do something
        // 能获取组件实例 ‘this’
        next();
    }
 }

-->如果路由里配置beforeEnter，会先调用这个守卫的；

{
    path:'/a',
    component:require('../components/a'),
    beforeEnter:(to,from,next) {
        next();
        //next() 一定要调用（该方法可以改变跳转和回退的路径，非常有用的）
    }
}

该导航守卫能解决回退到指定页面的问题，具体查看这里;

--> 解析异步路由组件(解析目标组件)

--> 如果组件激活，进入组件，此时beforeRouteEnter() 守卫被调用；（他也是在组件内，但并不能访问组件实例，需要回调给next来访问组件，在导航确认后执行回调，组件实例为入参。只要该守卫有回调，其他组件内的守卫是没有回调的）

 export default {
    data(){
        return {}
    },
    beforeRouteEnter(to,form,next){
        // do something
        // 能获取组件实例 ‘this’
        next();
    }
 }

--> 调用全局的 beforeResolve 守卫 (2.5+),和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。（这是2.5+ 新增的）

--> 导航被确认（这个时候的$route对象的属性是不可变的了）

--> 调用全局的 afterEach 钩子

--> 触发DOM更新，目标路径页面渲染

--> 该组件实例已创建，可以调用beforeRouteEnter 守卫中传给 next 的回调函数

--> beforeRouteLeave 在组件里调用，当离开该组价时调用

8. history模式和hash模式

history模式需要history.pushState来支持，这是h5新引入的方法。hash模式这没有这个条件。

作者：刈懋
链接：https://www.jianshu.com/p/9c677ae58325
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。