vuejs показывать приветствие или вход в систему без элементов меню из шаблона, возможно ли показать эти представления снаружи роутера? - PullRequest
Новая
       9

vuejs показывать приветствие или вход в систему без элементов меню из шаблона, возможно ли показать эти представления снаружи роутера?

0 голосов
/ 11 октября 2018

Я использую vuejs 2. У меня вопрос о маршрутах в vuejs.

В следующем примере.У меня проблема в том, что при вызове логина или приветствия View меню из шаблона видно, показывая меню опций.эта проблема возникает из-за того, что эти виды являются частью моего маршрута, и они добавляются в шаблон как частичные виды.

Я не хочу помещать v-if или v-show в представление шаблоначтобы скрыть меню опций.

Есть другой способ показать де логин или приветствие ?, например, загрузить их снаружи <router-view>?

index.html 

 <!DOCTYPE html>
    <html>
        <head>

        </head>
        <body>
             <h1>App</h1>
             <div id="app"></div>
         </body>
    </html>

Archivo src / main.js 

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

    new Vue({
        el: '#app',
        router,
        components: { App },
        template: '<App/>'
    })

Archivo src / App.vue (макет). 

  <template>
        <div>
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <router-link tag="li" to="/">
                                <a>Home</a>
                            </router-link>
                            <router-link tag="li" to="/Contacts">
                                <a>Contacts</a>
                            </router-link>
                            <router-link tag="li" to="/Users">
                                <a>Users</a>
                            </router-link>                       
                        </ul>
                    </div>
                </div>
            </nav>

            <router-view></router-view>

        </div>
    </template>

    <script>
    export default {
        name: 'App'
    }
    </script>

    <style>
        body {
            padding-top: 50px;
        }
    </style>

// рут 

    import Vue    from 'vue'
    import Router from 'vue-router'

    import Home    from '@/components/Home'
    import Users   from '@/components/Users'
    import Login   from '@/components/Login'
    import Welcome   from '@/components/Welcome'
    import Contacts   from '@/components/Contacts'

    Vue.use(Router)

    export default new Router({
        routes: [
            {
                path: '/',
                component: Home
            },
            {
                path: '/login',
                component: Login
            },
            {
                path: '/welcome',
                component: Welcome
            },
            {
                path: '/contacts',
                component: Contacts
            },
            {
                path: '/users',
                component: Users
            }
        ]
    })
...