페이지에서 vue 라우터 숨기기

페이지에서 vue 라우터 숨기기

로그인 페이지에서 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>

방금 같은 문제가 발생했는데, 두 가지 방법을 찾았습니다.

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>

안부 전해요.

사용할 수 있습니다.v-if이 경우:

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

어디에isOnLoginPage는 현재 루트에 따라 true 또는 false를 반환하는 단순한 방식입니다.

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

로그인 경로가 '/interface'인 경우

당신의 앱에서.표시하다

<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>

언급URL : https://stackoverflow.com/questions/42903356/hide-vue-router-from-a-page