vue 路由meta 设置title 导航隐藏

router.js

    routes: [{
            path: ‘/‘,
            name: ‘HelloWorld‘,
            component: HelloWorld,
            meta: {
                title: "HelloWorld",    要现实的title
                show: true               设置导航隐藏显示
            }

        }]

App.vue

<template>
	<div id="app">
		<router-view></router-view>
		<bottom v-show="this.$route.meta.show"></bottom>   this.$route.meta.show  显示或隐藏
</div> </template>

  

main.js

router.beforeEach((to, from, next) => {

    if (to.meta.title) {
        document.title = to.meta.title
    }
    next()
})

监听路由 写入 title

  

原文地址:https://www.cnblogs.com/nns4/p/8589539.html

时间: 2024-08-07 17:42:23

vue 路由meta 设置title 导航隐藏的相关文章

VUE—路由(四)导航守卫&amp;动态路由

1.在个人中心中做个表单,当表单中有内容时,跳转到其他页面做个提醒 除了beforeRouteLeave在组件中还有其他路由函数,统称导航守卫 2.当从个人中心跳到学术讨论的时候,学术讨论页面也知道跳转进来了,这个函数叫beforeRouteEnter 原文地址:https://www.cnblogs.com/tianya-guoke/p/11509461.html

当vue路由变化时 改变导航条式样

这个是导航栏: <router-link to="/unusedOrder"> <div class="">路由1</div> </router-link> <router-link to="/usedOrder"> <span class="">路由2</span> </router-link> <router-link t

VUE—路由(五)导航守卫

一.路由独享守卫 假如要守护home路径,就在router.js中home路径中设置 二.全局守卫(守卫所有路径) 加在路由整体上—>router中,router在mian.js中使用,所以先设置main.js 2.全局守卫:beforeResolve (当路由内的东西都被解析完毕时执行(一层一层都加载完的时候)) 形式与上面的router.beforeEach一样 3.router.afterEach( ) =>{   }  什么都ok时执行,没有实质意义,里面也没有参数 路由的解析流程:

nuxt.js 路由 , meta设置

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置. 我做了一个小例子:大家看一下就明白了 <section class="container"> 路由传值可以通过 $route.params.id 来接收参数. <!-- 路由传值一个数组 idList : 首先声明一个数组[{name:'张三'},{name:'李四'},{name:'王五'}] 然后同级创建一个demo1.vue文件,里边内容自定义 --> <nu

Vue 路由设置router

由于学习的是router1.0的设置方法,但是现在都是支持2.0的,都报错,那些方法没定义,所以只好又来研究一下router2.0. vue-router2.0对路由的设置有了很大的改变,在HTML中将之前的用a标签link path改成了直接用一个router-link标签,但是你在网页审查元素会发现它还是一个a标签,router-view没有改变,在js中也将原本的router.map 直接改成了一个数组然后在new VueRouter时直接将数组用进去,将之前的挂载由router.star

「Vue」起步 - vue-router路由与页面间导航

vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不存在"请求"一说的. 前端路由是找到地址匹配的一个组件或者对象将其渲染出来.改变浏览器地址不向服务器发送请求有两种方法, 一是在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航:二是使用HTML5的window.history功能,使用URL的hash来模拟一个完整的URL. vue-router

通过props设置vue子组件的显示与隐藏

最近项目在使用antd组件库做项目,页面中大量使用了a-modal弹窗.但是由于a-modal不能满足实际项目中的结构需要.为了方便复用,所以需要围绕a-modal进行二次封装.由此便引发了'如何通过props设置vue子组件的显示与隐藏'.其实主要问题是vue本身为了保证单向数据流,所以在子组件内部不能直接修改props. 1.1父组件代码 1.2子组件代码 1.3代码说明 (1)首先在父组件内给子组件的标签绑定一个自定义属性visible,默认值为false,父组件内的按钮事件可以修改vis

vue路由复习(转载)

回头看 vue-router 复习 我的github iSAM2016 目录 响应路由参数的变化 嵌套路由 函数式导航 路由的命名 示例:切换路由的时候可以修改页面的标题 导航钩子 全局钩子 实例:检测用户登录 路由元信息 路由对象信息 Router 实例 $router.options 中途有一段时间去隔壁家的php玩了一遭,回头看来,vuex.vue-router有了改变,一开始就对vue-route的细节不是很了解,今天总结一下. 官网的例子: 自己的一句话: 定义路由组件(汽车) con

vue 路由知识点梳理及应用场景整理

最近做项目才发现,我确实对 vue-router 太不熟悉了,都只了解个简单用法就开始搞了,本来很简单的问题,都搞不清楚.现在重新看一遍文档,重新梳理一下. vue 路由的原理 说实话,路由我一直也就光顾着用,没认真思考过这个问题,还是那次人家面试问了这个,我才反应过来是应该好好的了解一下了. 无刷新跳转页面,是单页应用的一大优势,用户体验好,加载速度快,vue 路由的跳转就是无刷新的,它有两种形式,可以在定义路由的时候通过 mode 字段去配置,如果不配置这个字段,那么默认使用的就是 hash