vue 路由守卫和实现在新窗口打开

本文最后更新于2022.04.08-14:58，某些文章具有时效性，若有错误或已失效，请在下方留言或联系涛哥。

Navigation.vue

<template>
  <div class="title">
    <span>爱奇艺</span>
    <span>点击即可查看本区标签的相关内容</span>
    <ul>
      <!-- active-class 被激活的样式 -->
      <li v-for="(nl,index) in navList" :key="index">
        <!-- 如果要打开新窗口 -->
        <template v-if="nl.blank">
          <a active-class="current" @click.stop="openWindow(nl.jump)" href="#">{{nl.name}}</a>
        </template>
         <template v-else>
          <router-link active-class="current" :to="nl.jump">{{nl.name}}</router-link>
        </template>  
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
//最终转换为a标签默认push可以加上replace
//
export default {
  name: "Navigation",
  methods:{
      openWindow(url){
          let routerUrl=this.$router.resolve({
              path:url,
              query:{
                bv:"BV11v411u7gb"
              }
          });
          // 打开地址
          window.open(routerUrl.href,"_blank");
      }
  },
  data(){
      return{
          navList:[
              {name:'爱奇艺',jump:'/iqiyi',blank:true},
              {name:'电视剧',jump:'/dianshiju'},
              {name:'电影',jump:'/dianying'},
              {name:'综艺',jump:'/zongyi'},
              {name:'动漫',jump:'/dongman'},
          ]
      }
  }

};
</script>

<style scoped>
.title {
  width: 100%;
  height: 88px;
  background-color: #fff;
  margin: 0 auto;
}
.title span:nth-child(1) {
  font-size: 18px;
  line-height: 24px;
  color: #222;
  vertical-align: middle;
}
.title span:nth-child(2) {
  color: #99a2aa;
  margin-left: 20px;
  margin-bottom: 2px;
  display: inline-block;
  vertical-align: bottom;
}
.title ul {
  overflow: hidden;
  margin-right: -10px;
  list-style: none;
}
.title ul li {
  /* display: inline-block; */
  float: left;
  position: relative;
  border: 1px solid #e5e9ef;
  border-radius: 12px;
  background-color: #fff;
  height: 22px;
  margin: 5px 10px 5px 0;
  cursor: pointer;
}
.title ul li a {
  display: block;
  line-height: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #222;
  padding: 0 10px;
  text-decoration: none;
  font-size: 10px;
}
.current {
  background-color: #00a1d6 !important;
}
.current a {
  color: #ffffff !important;
}
</style>

路由配置

//该文件专门用来创建和管理整个应用的路由器
import VueRouter from "vue-router"
import IQiYi from "../pages/IQiYi"
import DianShiJu from "../pages/DianShiJu"
import DianYing from "../pages/DianYing"
import DongMan from "../pages/DongMan"
import ZongYi from "../pages/ZongYi"
import XiJu from '../pages/dianying/Xiju'
import JingSong from '../pages/dianying/JingSong'

//创建并暴露一个路由器
const router= new VueRouter({
    //地址和组件的对应关系
    routes:[
        {
            path:'/',//默认路由
            name:'iqiyi',
            component:IQiYi,//组件
            meta:{
                isAuto:false,//是否需要路由组件拦截
                title:'爱奇艺主页'
            }
           
        },
        {
            path:'/iqiyi',//默认路由
            name:'iqiyi',
            component:IQiYi,//组件
            meta:{
                isAuto:false,//是否需要路由组件拦截
                title:'爱奇艺主页'
            }
           
        },
        {
            path:'/dianshiju',//地址
            name:'dianshiju',
            component:DianShiJu,//组件
            meta:{
                isAuto:false,//是否需要路由组件拦截
                title:'电视剧频道'
            }
           
        },
        {
            path:'/dianying',//地址
            name:'dianying',
            component:DianYing,//组件
            meta:{
                isAuto:true,//是否需要路由组件拦截
                title:'电影频道'
            },
            children:[
                {
                    path:'jingsong',
                    component:JingSong,
                    meta:{
                        isAuto:false,//是否需要路由组件拦截
                        title:'惊悚'
                    }
                },
                {
                    path:'xiju',
                    component:XiJu,
                  

                }
            ],redirect:'/dianying/jingsong'
           
        },
        ,
        {
            path:'/zongyi',//地址
            name:'zongyi',
            component:ZongYi,//组件
            meta:{
                isAuto:true,//是否需要路由组件拦截
                title:'综艺频道'
            }
           
           
        },
        {
            path:'/dongman',//地址
            name:'dongman',
            component:DongMan,//组件
            meta:{
                isAuto:false,//是否需要路由组件拦截
                title:'动漫频道'
            }
           
        },

       
    ]
})

// 前置路由守卫 在每个路由之前
// to 到哪去
// from 由哪来
// next 是否放行
router.beforeEach((to, from, next) => {
    // 判断是否是会员
  if(to.meta.isAuto){//判断是否要去看电影
     // 判断是否是会员
     if(localStorage.getItem('vip') === "true"){
            // 放行
            next();
        }else{
            alert("穷逼");
        }
  }else{
      next();//放行
  }
});
// 后置路由守卫
router.afterEach((to,from) => {
    document.title=to.meta.title;
    
})
// 暴露路由
export default router;