如果用戶已登錄，請更改路由名稱和組件

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

  }
}