Vue路由详解(命名视图,路由守卫)

一. 命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

* 在内容的组件里写<router-view>标签,标签有name属性,如果不写,这个插口放置的是设置的默认的组件.

* 新建两个想要显示的组件

* index.js页面进行配置

例: (这里不再写新建组件,组件的名称分别为MyNews,MyComment)

<router-view></router-view>
<router-view name="comment"></router-view>

routes:[
  {path:'/aux', component:MyAux,children: [
  //name值为头组件</router-link>标签to属性的name值
        {path:'article',name:'aux_article', components:{
            default:MyNews, //如果没有name属性,将默认显示MyNews组件
            comment:MyComment, //如果name属性值为commment显示MyComment组件
          }},
    ]},
]

下面上一个效果图吧:

新闻组件和评论组件同时显示在内容组件里

二. 路由守卫

1.全局前置守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：

to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

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

router.beforeEach((to,from,next)=>{
  // console.log(to,from);
  // next();
  //禁止页面从/mine/account跳转到aux_article
  if(to.name=='aux_article' && from.path=='/mine/account'){
    alert('非法入侵!!!');
  }else{
    next();
  }
});

2.全局后置守卫

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子当组件进入时触发, 不会接受 next 函数也不会改变导航本身：

to 和 from 参数跟全局前置守卫的 to 和 from 参数一样.

router.after((to,from)=>{
  // console.log(to,from);
});

3.路由独享的守卫

给路由配置, 在路由对象里配置 ,只对配置的路由起作用.

它里面的参数与全局前置守卫参数一样.

{path: '/mine',component:Mine,children:[],
  beforeEnter: (to, from, next) => {
        let num = Math.random()>0.5;
        if(num){
          next();
        }else{
          alert('您还没有登录,请先登录!');
        }
      }},
},

4.组件内的守卫

你可以在路由组件内直接定义以下路由导航守卫：

beforeRouteEnter beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

data(){
  return{
    msg:'这是product组件',
  }
},
beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
        // console.log(this);
        //你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
        next((vm)=>{
          console.log(vm.msg)
        });
      },
      beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
        console.log('update方法触发', this.msg);
        next();
      },
      beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        let res = window.confirm('当前数据尚未保存,请问确定要离开吗?');
        if(res){
          next();
        }
      },

5.滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

这个方法返回滚动位置的对象信息，长这样：

{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

routes:[...]
// 滚动行为
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 500 }
  }

参考官网: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB