[英]Vue js conditional layouts
我有一个利用vuetify布局的vue js应用程序。 主要兴趣点如下:
main.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
})
应用程序/ index.js
export { default as routes } from './routes'
export { default as vuex } from './vuex'
export { default as App } from './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>© 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
,并按预期方式呈现。 我目前面临两个主要问题:
Home
链接用蓝色突出显示(处于活动状态),这是正确的,但是当我访问其他网址(例如/account
两个链接都在工具菜单中突出显示了,我是否设置了路由错误或是否存在其他原因那? 为了进行身份验证,我使用vue-router的按路由保护器beforeEnter
,请beforeEnter
Navigation Guards 。
Authguard只是检查Vuex存储中是否有有效用户,但是您可以在if..else块中使用任何表达式。
{ 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中寻找类似的东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.