Скрыть vue router со страницы

Можно ли скрыть 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>

введите здесь описание изображения


javascript vue.js vue-router vuejs2
person Lucafraser    schedule 20.03.2017    source источник

Ответы (3)


arrow_upward
13
arrow_downward

У меня была такая же проблема, и я нашел 2 подхода:

<сильный>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 !== '/'" к элементу инкапсуляции (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>

С Уважением.

person dime2lo    schedule 10.06.2017

arrow_upward
3
arrow_downward

Вы можете использовать v-if для этого:

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

где isOnLoginPage может быть простым методом, который возвращает true или false в зависимости от текущего маршрута.

isOnLoginPage: function() {
  return this.$route.path === '/'
}
person Saurabh    schedule 20.03.2017
comment
Будет ли это скрывать меню на странице входа? - person Lucafraser; 20.03.2017
comment
Ааа, должно быть наоборот, сейчас я изменил условие v-if. - person Saurabh; 20.03.2017
comment
Вы понимаете, что я имею в виду? Скрыть список с Логин, Дом и т.д. И для моего меню на Доме Логин не должен быть там. - person Lucafraser; 20.03.2017

arrow_upward
0
arrow_downward

если ваш путь для входа '/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>
person forgere    schedule 23.03.2017