如果用户已登录，请更改路由名称和组件

Question

我的nativescript-vue中有一个正常运行的登录组件，该组件利用RadSideDrawer 。

我要做的就是将“ Login路线更改为“ Logout ，但我似乎不知道该如何实现。 三元运算符不会完全起作用。

我还尝试声明一个新的空数组，然后将菜单数组放入其中并对其进行操作，而不是原始数据。 这也不起作用。

我需要关闭该应用程序，然后再次打开它以更改菜单项，这不是被动的。

首先，这里是我的app.js

Vue.prototype.$routes = routes

new Vue({
    store,
    render (h) {
        return h(
          App,
          [
            h(DrawerContent, { slot: 'drawerContent' }),
            //h(store.getters.loggedIn ? routes.Home : routes.Login, { slot: 'mainContent' })
            h(routes.Home, { slot: 'mainContent' })
          ]
        )
      }
  }).$start()

这是我在router/index.js中声明路由器的路由器。

import Home from "../components/Home";
import Browse from "../components/Browse";
import Featured from "../components/Featured";
import Search from "../components/Search";
import Settings from "../components/Settings";
import Tasks from "../components/Tasks";
import Login from "../components/Login";
import Logout from "../components/Logout";

const routes = {
    Home,
    Browse,
    Featured,
    Search,
    Settings,
    Tasks,
    Login,
    Logout
}

export default routes

我还使用了$store其中包含一堆getter，setter，突变和操作，如果用户已登录，这些getter之一将检索

export const store = new Vuex.Store({
    state: {
        token: LS.getItem('access_token') || null,
        filter: 'all',
        todos: [],
        msg: ''
    },
    getters: {
        loggedIn(state) {
            return state.token !== null
        },
    }
}

由于我使用的是Drawer导航，所以这里是DrawerContent.vue

<template lang="html">
    <GridLayout rows="auto, *" class="sidedrawer sidedrawer-left">
        <StackLayout row="0" class="sidedrawer-header">
            <Label class="sidedrawer-header-image fa" text.decode="&#xf2bd;"></Label>
            <Label class="sidedrawer-header-brand" text="User Name"></Label>
            <Label class="footnote" text="username@mail.com"></Label>
        </StackLayout>

        <ScrollView row="1" class="sidedrawer-content">
            <StackLayout>

                <GridLayout
                        columns="auto, *"
                        :class="'sidedrawer-list-item' + (selectedPage === page.name ? ' selected': '')"
                        v-for="(page, i) in pages"
                        :key="i"
                        @tap="goToPage(page.component)">
                    <Label col="0" :text="page.icon" class="fa"></Label>
                    <Label col="1" :text="page.name" class="p-r-10"></Label>
                </GridLayout>

            </StackLayout>
        </ScrollView>
    </GridLayout>
</template>

<script>
    import * as utils from "~/shared/utils";
    import SelectedPageService from "~/shared/selected-page-service";
    import Login from "./Login";
    import Featured from "./Featured";

    export default {
        data () {
            return {
                selectedPage: "",
                pages: [
                    {
                        path: '/',
                        name: 'Home',
                        icon: "\uf015",
                        component: this.$routes.Home
                    },
                    {
                        path: '/browse',
                        name: 'Browse',
                        icon: '\uf25a',
                        component: this.$routes.Browse,
                        meta : {
                            requiresAuth: true
                        }
                    },
                    {
                        path: '/featured',
                        name: 'Featured',
                        icon: '\uf005',
                        component: this.$routes.Featured
                    },
                    {
                        path: '/search',
                        name: 'Search',
                        icon: '\uf002',
                        component: this.$routes.Search
                    },
                    {
                        path: '/settings',
                        name: 'Settings',
                        icon: '\uf013',
                        component: this.$routes.Settings
                    },
                    {
                        path: '/tasks',
                        name: 'Tasks',
                        icon: '\uf0ae',
                        component: this.$routes.Tasks
                    },
                    {
                        path: '/login',
                        name: 'Login',
                        icon: '\uf007',
                        component: this.$routes.Login
                    }
                ]
            };
        },
        mounted() {
            SelectedPageService.getInstance().selectedPage$
                .subscribe((selectedPage) => this.selectedPage = selectedPage);
        },
        methods: {
            goToPage (pageComponent) {
                this.$navigateTo(pageComponent, {
                    clearHistory: true
                });
                utils.closeDrawer();
            },
        },
        computed: {
            loggedIn() {
                return this.$store.getters.loggedIn
            },
        }
    };
</script>

如您所见，此处实际上是在pages数组中定义路由，然后在上面的GridLayout进行循环的位置。

问题是，由于我不得不处理来自循环本身的数据，因此它几乎没有摆动的空间if(page.name === 'Login') { page.name = 'Logout' }

这是我最初尝试使用v-if指令。 但是我很快就放弃了它，因为声明太长而且有点混乱。

我也尝试删除循环并仅对整个菜单进行硬编码，但无法访问标记中的this.$routes.Home 。

在这一点上我真的迷路了。 我愿意接受您的任何建议。

Answer 1

使pages属性成为一个吸气剂，以便您可以轻松地push入数组：

computed: {
  pages: function() {
    const pages = [{
        path: '/',
        name: 'Home',
        icon: "\uf015",
        component: this.$routes.Home
      },
      {
        path: '/browse',
        name: 'Browse',
        icon: '\uf25a',
        component: this.$routes.Browse,
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/featured',
        name: 'Featured',
        icon: '\uf005',
        component: this.$routes.Featured
      },
      {
        path: '/search',
        name: 'Search',
        icon: '\uf002',
        component: this.$routes.Search
      },
      {
        path: '/settings',
        name: 'Settings',
        icon: '\uf013',
        component: this.$routes.Settings
      },
      {
        path: '/tasks',
        name: 'Tasks',
        icon: '\uf0ae',
        component: this.$routes.Tasks
      },

    ]

    if (!!this.$store.getters['loggedIn']) {
      pages.push({
        path: '/logout',
        name: 'Logout',
        icon: '....',
        component: this.$routes.Logout
      })
    } else {
      pages.push({
        path: '/login',
        name: 'Login',
        icon: '\uf007',
        component: this.$routes.Login
      })
    }

    return pages

  }
}