雅安论坛

标题: vue公共组件裁减导航, [打印本页]
作者: 匿名    时间: 2023-9-25 08:40
标题: vue公共组件裁减导航,
场景：

    有一个公共头部和底部，vue搭建的框架，在app.vue里写的公共方法，首页是个登录页面，不需要公共部分，在这基础上进行公共部分的显示隐藏。

    即注册页、登录页、404页面都不要导航
公共代码写在vue.app里面。主要用到的是：
  1. <template>
  2. <div v-show="zs">
  3. ······
  4. //这个里面也有路由的占位，后面那个主要是在避免注册页面显示空白的问题
  5. <div>
  6. </template>
  7.   <!-- 路由占位符 -->
  8.         <router-view> </router-view>
  9.   <!-- 内容区域结束 -->
复制代码

  2. <script lang='ts'>
  3. export default {
  4.   data() {
  5.     return {
  6.       zs:false //这个地方要先设置一个状态
  7.     }
  8.   },
  9.   computed: {
  10.     greeting() {
  11.       return this.message + '!'
  12.     }
  13.   },
  14.   watch:{
  15.     $route(to,from){
  16.       if (to.path=='/login') {
  17.         this.zs=false;
  18.       }else{
  19.         this.zs=true;
  20.       }
  21.     }
  22.   },
  23.   mounted() {
  24.    this.path = this.$route.path;//当前路由
  25.    if(this.$route.path == '/login'){
  26.     this.zs = false;
  27.    }
  28.   }
  29.   
  30. }
  31. </script>
复制代码






欢迎光临 雅安论坛 (http://www.yaanbbs.net/) Powered by Discuz! X3.4