vuejs 路由名字為login時隱藏導航和側欄

1.因為每個頁面都有head和側欄，所以我把這兩部分寫在app.vue里面了
2.然而現(xiàn)在要做登錄頁，登錄頁不需要head和側欄這兩部分
3.我使用v-if控制了一下，登錄頁到是沒有這兩部分了，進去之后也沒有了，不知道哪里寫錯了

路由設置（截取了中間部分）：

{
  path: '/components/login',
  name: 'login',
  component: login
},
{
  path: '/components/userlist',
  name: 'userlist',
  component: userlist
},

app.vue(v-if是我加的控制，但是會造成登錄頁這兩部分沒有，登錄進去后也沒有):

<template>
  <div id="app">
    <!-- <headpart class="headpart" ></headpart>
    <sidebar class="side" ></sidebar> -->
    
    <headpart class="headpart" v-if="['login'].indexOf($router.name) > -1"></headpart>
    <sidebar class="side" v-if="['login'].indexOf($router.name) > -1"></sidebar>
    <router-view></router-view>
  </div>
</template>

圖片描述

進去之后：

圖片描述

回答

編輯回答

何蘇葉

使用 vue-router 命名視圖解決

2018年6月10日 09:07

編輯回答

好難瘦

其實你那兩個不應該寫在APP.vue里面，不過你可以computed一下路由是不是login，然后做show的操作啊

2017年8月9日 01:03

編輯回答

凹凸曼

其實可以參考這個項目不用那么麻煩的

https://github.com/misterGF/C...

2018年8月17日 04:34

編輯回答

尛曖昧

因為你是路由跳轉。他只更新了router-view頁面。router-view以外的元素則不在渲染，

export default {
    name: 'xx',
    data () {
      return {
        show: true
      }
    },
    watch: {
      '$route' () {
        console.log(this.$route.name)
        // 不等于登錄頁面的時候為true
        this.show = this.$route.name !== 'xxxx' 
      }
    }
}

通過監(jiān)聽路由地址的變化改變變量，再有變量控制是否顯示頭部的等。

2017年12月13日 19:34

編輯回答

胭脂淚

['login'].indexOf($router.name) > -1 // 這么寫監(jiān)測不到變化吧。

app里加個watch
v-show = showHeadAndSide

data () {
  return {
    showHeadAndSide: false
  }
},
watch: {
  '$route' () {
     this.showHeadAndSide = '根據(jù)$route做判斷'
  }
},
created () {
    // 需要初始化，因為watch拿不到初始值，只有在變的時候才能響應
    this.showHeadAndSide = '根據(jù)$route做判斷'
}

2018年7月8日 06:35