Vue设置导航栏为公共模块并在登录页不显示
2023-09-11 14:21:56 时间
Vue设置导航栏为公共模块并在登录页不显示
2019-01-25 19:22:00 weixin_30813225 阅读数 99 收藏
原文链接:http://www.cnblogs.com/Kyaya/p/10321285.html
1.公共模块的内容可以放在App.vue中
但是通常登录页面是不需要导航的,那么就需要规避登录页
这时,就可以采用keep-alive结合$route.meta来实现这个功能。
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。$route.meta则可以选择让需要的页面才展示。修改App.vue,如下:
-
<template>
-
<div id="app">
-
<div v-if="$route.meta.keepAlive">
-
<head-nav></head-nav>
-
<router-view></router-view>
-
</div>
-
<router-view v-if="!$route.meta.keepAlive"></router-view>
-
</div>
-
</template>
-
<script>
-
import HeadNav from './components/HeadNav'
-
export default {
-
name: 'App',
-
components:{HeadNav},
-
}
-
</script>
2.修改index.js代码
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Qylist from '@/components/Qylist'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login,
meta: {
keepAlive: false
}
},
{
path: '/project',
name: Qylist,
component: Qylist,
meta: {
keepAlive: true
}
}
]
})
相关文章
- Vue_(组件)过渡效果
- Vue-Router中History模式【华为云分享】
- VUE - 引入 npm 安装的模块 以及 uuid模块的使用
- VSCODE平台上使用VU3 遇到报错 提示找不到VUE模块
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue.js3: 使用js-md5 (js-md5@0.7.3 / vue@3.2.26)
- vuex结合vue-cookies的使用
- [Vue] Get up and running with vue-router
- vue事件修饰符:通过@click.capture捕获内层事件(爷爷-父亲-儿子)
- 【视频】vue组件之$emit父子组件间值的传递
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- 前端必备技能知识:vue.js操作excel表格,实现导入导出功能
- 在vue里运行报错:Failed to resolve loader: sass-loader You may need to install it.提示需要安装sass模块
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- vue select下拉框绑定默认值
- Vue中vue-i18n结合element-ui实现国际化
- Vue、Vuejs从入门到精通 | vue-router详解
- 125:解决vue+openlayers弹窗中的地图不显示的问题 ( 代码示例 )
- 054:vue+openlayers经纬度动态赋值(示例代码)
- Vue环境下,在单页面中遍历显示出多个Echarts图表
- 如何在vue组件中引入外部的css和js文件
- 【keep-alive失效问题】使用Vue的keep-alive缓存前一个页面查询条件失效问题