Question

是否可以从登录页面隐藏vue-router？如果是这样，我该怎么做？我在每个页面上看到菜单，但在登录页面上我不想看到它。

这是我的代码：

登录

 <template>
 <div>
     <h1>Login</h1>
        <form action="">
            <label>naam</label>
            <input type="text">
        </form>
    </div>
</template>

<script>

</script>


<style scoped>
    h1 {
        background-color: chartreuse;
    }
</style>

App.vue

<template>
  <div id="app">
    <div class="routing">

    </div>
    <router-link to="/">Login</router-link>
    <router-link to="/home">Home</router-link>
    <router-view v-if="$route = 'login'"></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

Main.js

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import App from './App.vue'
    import Login from './Login.vue'
    import Home from './Home.vue'

    Vue.use(VueRouter);

    const routes = [
        { path: '/', component: Login},
        { path: '/home', component: Home},
    ];

    const router = new VueRouter({
      routes,
        mode: 'history'
    });

    new Vue({
      el: '#app',
        router,
      render: h => h(App)
    });

Home.vue

<template>
    <div>
        <h1>Home</h1>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>

</script>


<style scoped>
h1 {
    background-color: aquamarine;
}
</style>

Answer 1

我遇到了同样的问题并找到了两种方法：

<强> 1。使用嵌套路线 - http://router.vuejs.org/en/essentials/nested-routes.html

基本上你必须使用你的App.vue作为一种占位符，所有页面之间共享的所有元素（在你的情况下我认为是没有），并在其中放置<router-view></router-view>。对你而言，我相信会像以下一样简单：

//App.vue

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

您还必须拥有另一个可以保存菜单的模板：

//Restricted.vue

<template>
  <div id="restricted">
    <div class="routing">

    </div>
    <router-link to="/">Login</router-link>
    <router-link to="/home">Home</router-link>
    <router-view></router-view>
  </div>
</template>

在路由器中应该有类似的内容：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Login from './Login.vue'
import Home from './Home.vue'
import Restricted from '/.Restricted.vue';

Vue.use(VueRouter);

const routes = [
    { path: '/', component: Login},
    {
        path: '/restricted',
        component: Restricted,
        children: [
           { path: 'home', component: Home},
        ],
    },        
];

const router = new VueRouter({
  routes,
  mode: 'history'
});

new Vue({
  el: '#app',
    router,
  render: h => h(App)
});

这样，您的登录页面将在/以及/restricted/{other_page}的其他页面（带菜单）呈现。使用此方法，菜单将不会显示也不会呈现。

<强> 2。在您不想呈现的组件上使用v-if。

在App.vue v-if="this.$route.path !== '/'"中使用router-link对您不想呈现的元素使用v-if="this.$route.path !== '/'"＆＃39}。您可以封装它们并将div应用于封装元素（//App.vue <template> <div id="app"> <div class="routing" v-if="this.$route.path !== '/'"> <router-link to="/">Login</router-link> <router-link to="/home">Home</router-link> </div> <router-view></router-view> </div> </template>？）

(iterate improve x)

问候。

Answer 2

您可以使用v-if：

<router-link v-if="!isOnLoginPage()" to="/">Login</router-link>

其中isOnLoginPage可以是一个简单的方法，根据当前路由返回true或false。

isOnLoginPage: function() {
  return this.$route.path === '/'
}

Answer 3

如果您的登录路径是'/ login'

在你的App.vue中

<template>
  <div id="app">
    <div class="routing">

    </div>
    <router-link to="/" v-if="$route.fullPath !== '/login'">Login</router-link>
    <router-link to="/home" v-if="$route.fullPath !== '/login'">Home</router-link>
    <router-view v-if="$route.fullPath === '/login'"></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

从页面隐藏vue路由器

3 个答案: