javascript - Vue js 条件布局

Question

我有一个使用 vuetify 布局的 vue js 应用程序。主要兴趣点如下:
ma​​in.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Vuetify from 'vuetify'
import { App } from './app'
import router from './router'
import store from './store'
import('../node_modules/vuetify/dist/vuetify.min.css')

/* eslint-disable no-new */

Vue.use(Vuetify)

new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

路由器/index.js

import Vue from 'vue'
import Router from 'vue-router'
import routes from '../app/routes'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: routes
})

app/index.js

export { default as routes } from './routes'
export { default as vuex } from './vuex'
export { default as App } from './App'

app/routes.js

import accounts from './accounts/routes'
import budgets from './budgets/routes'
import transactions from './transactions/routes'

import IndexComponent from './IndexComponent'

var rt = [
  {
    path: '/',
    component: IndexComponent,
    name: 'index'
  }
]

export default [...rt, ...accounts, ...budgets, ...transactions]

app/App.vue(现在基本上是布局)

<template>
  <v-app id="inspire" dark="">
    <v-navigation-drawer
      clipped=""
      fixed=""
      v-model="drawer"
      app="">

      <v-list dense="">

        <v-list-tile :to="{name: 'index', params: {id: 'test'}}">
          <v-list-tile-action>
            <v-icon>home</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Home</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>

        <v-list-tile :to="{name: 'accountsListView', params: {id: 'add'}}">
          <v-list-tile-action>
            <v-icon>dashboard</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Tester</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>

        <v-list-tile @click.stop="dialog = true">
          <v-dialog v-model="dialog" max-width="290">
            <v-card>
              <v-card-title class="headline">Use Google's location service?</v-card-title>
              <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Disagree</v-btn>
                <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Agree</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
          <v-list-tile-action>
            <v-icon>settings</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Settings</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar app="" fixed="" clipped-left="">
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Lost Memories</v-toolbar-title>
    </v-toolbar>

    <router-view />

    <v-footer app="" fixed="">
      <span>&copy; 2018</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    drawer: null,
    dialog: false
  }),
  props: {
    source: String
  }
}
</script>

app/IndexComponent.vue

<template>
    <v-content>
      <v-container fluid="" fill-height="">
        <v-layout justify-center="" align-center="">
          <v-tooltip right="">
            <v-btn icon="" large="" :href="source" target="_blank" slot="activator">
              <v-icon large="">code</v-icon>
            </v-btn>
            <span>Source</span>
          </v-tooltip>
        </v-layout>
      </v-container>
    </v-content>
</template>

<script>
export default {
  data: () => ({
  }),
  props: {
    source: String
  }
}
</script>

app/accounts/routes.js

import * as components from './components'

export default [
  {
    path: '/accounts',
    component: components.AccountsListView,
    name: 'accountsListView'
  },
  {
    path: '/accounts/create',
    component: components.CreateEditAccounts,
    name: 'createAccounts'
  },
  {
    path: '/accounts/edit',
    component: components.CreateEditAccounts,
    name: 'editAccounts'
  }
]

然后是一些虚拟帐户组件。因此，正如主页上所预期的那样，IndexComponent 取代了 route-view 并按预期呈现。我目前面临两个主要问题:

1. 如何使用 vue 有条件地更改布局？例如，如果用户未经过身份验证，那么我想将他重定向到具有不同布局的另一个 View 。如何替换当前的布局？这样的架构是否可行？
2. 在主页上，Home 链接以蓝色突出显示(作为事件链接)，这是正确的，但当我访问 /account 等其他网址时，两个链接都会突出显示在工具菜单中，我是否错误地设置了路线或者有其他原因？

Answer 1

对于身份验证，我使用 vue-router 的每路由防护 beforeEnter，引用 Navigation Guards 。

Authguard 只是检查 Vuex 存储中是否有有效用户，但您可以在 if..else block 中使用任何表达式。

{ path: '/tasks', name: 'Tasks', component: Tasks, 
  beforeEnter: (to, from, next) => {
    if (AuthGuard.canActivate()) {
      next()
    } else {
      next({ path: `/login?returnUrl=${to.path}&prompt=Team Tasks` })
    }
  } 
},

请注意，未登录时，我会将它们带到登录页面，但也会传递 returnUrl，以便在成功登录后它们会返回到原始请求的页面。

Login.vue 组件像这样处理返回

created() {
  this.returnUrl = this.$route.query.returnUrl
}
methods: {
  login() {
    // record the user details
    if (this.returnUrl) {
      this.$router.push(this.returnUrl);
    }
  },
}

<小时/>

重新激活链接，在标准 vue 导航中您将使用

<router-link to="/tasks" tag="li" active-class="active"><a>Team Tasks</a></router-link> 

其中 active-class 属性负责将 active(用于引导)仅放在一个链接上。

我不知道你会如何为你的导航做这件事，也许在 vuetify 中寻找类似的东西。