vuejs 路由名字为login时隐藏导航和侧栏

Question

1.因为每个页面都有head和侧栏，所以我把这两部分写在app.vue里面了
2.然而现在要做登录页，登录页不需要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>

进去之后：

Answer 1

因为你是路由跳转。他只更新了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' 
      }
    }
}

通过监听路由地址的变化改变变量，再有变量控制是否显示头部的等。

Answer 2

其实你那两个不应该写在APP.vue里面，不过你可以computed一下路由是不是login，然后做show的操作啊

Answer 3

使用 vue-router 命名视图 解决

Answer 4

['login'].indexOf($router.name) > -1 // 这么写监测不到变化吧。

app里加个watch
v-show = showHeadAndSide

data () {
  return {
    showHeadAndSide: false
  }
},
watch: {
  '$route' () {
     this.showHeadAndSide = '根据$route做判断'
  }
},
created () {
    // 需要初始化，因为watch拿不到初始值，只有在变的时候才能响应
    this.showHeadAndSide = '根据$route做判断'
}

Answer 5

其实可以参考这个项目 不用那么麻烦的

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