Question

我正在使用vuejs2。我对vuejs中的路由有疑问。

使用以下示例。我有一个问题，当我致电登录或欢迎时，可以从模板查看菜单，显示选项菜单。之所以发生此问题，是因为此视图是我的路线的一部分，并且已像局部视图一样添加到模板中。

我不想在模板视图中放置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>

// rutas

    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
            }
        ]
    })

vuejs显示欢迎视图或登录视图，而没有模板中的菜单项，它可能从路由器视图的外部显示这些视图吗？

0 个答案: