vue 项目路由跳转后显示不同的title

1.在router/index.js的每个路由中配置title

  

2.在项目中运行命令 npm install vue-wechat-title --save 安装插件(在 package.json文件的dependencies中可以看到已安装 "vue-wechat-title": "^2.0.5")

3.在main.js 中引入并使用  

  import VueWechatTitle from ‘vue-wechat-title‘

  Vue.use(VueWechatTitle)

4. 在 app.vue 组件的 <router-view  v-wechat-title="$route.meta.title"/>标签中使用  v-wechat-title="$route.meta.title"属性。

  

原文地址:https://www.cnblogs.com/lhw888888/p/11442835.html

时间: 2024-11-23 09:19:58

vue 项目路由跳转后显示不同的title的相关文章

解决vue单页路由跳转后scrollTop的问题

作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路由的时候做个处理,如下: import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); Vue.use(Router) export default new Router({ routes: [ { path: '/',

在vue项目npm run build后,index.html中引入css和js 报MIME type问题

问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html') is not a supported stylesheet MIME type2.控制台报错:报错内容:http://127.0.0.1:5500/static/css/app.04f46711e76646577281177c721d6432.css 这个地址Cannot GET 解决思路:

Vue实现路由跳转和嵌套

在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套. index.html,只有一个路由出口 [html] view plain copy<div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> <

Vue之路由跳转传参,插件安装与配置

路由跳转 this.$router.push('/course'); this.$router.push({name:course}); this.$router.go(-1); //后退一页 this.$router.go(1): // 前进一页 <router-link to = "/course">课程页</router-link> <router-link :to="{name:'course'}"> 课程页 </r

keep-alive 路由跳转后不刷新页面

使用keep-alive记住了状态 通过路由跳转并且携带了参数,之前this.$route.params.list卸载mounted中,第一次进入能够更新,但是后面再次进入就不会更新了. 借用别人的话 当引入keep-alive 的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated.当再次进入(前进或者后退)时,只触发activated. 所以将方法写在 activated中

vue当前路由跳转初步研究

一样闲话少说,直接上问题,如图: 也是消息面板,没想到一个小小的消息面板,碰到这么多坑,惆怅. 就是如果当前路由和跳转路由不一样时,正常跳转没有任何问题.但是如果一样时,就不会跳转了,用了很多方法,比如给router-view加key,beforeRouterLeave,watch路由等都没有效果.这个路由跳转用的是params形式 <router-link :to="{ name:item.route, params:{ messageId:item.rid } }">&

vue相同路由跳转强制刷新该路由组件

在菜单的路由跳转上绑定一个随机query参数,例如时间戳或者随机数: 1 this.$router.push({ 2 path:"/xxx", 3 query:{ 4 t:Date.now(), 5 }, 6 }); 该操作会触发路由改变,但是组件内的状态没有初始化,因为组件没有被重建. 在路由容器上绑定key值: 1 <router-view :key="$route.path + $route.query.t"></router-view>

记录下自己VUE项目用Hbuider打包后启动白屏问题

刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSu

问题记录-Activity跳转后显示空白界面

前两天写一个简易安卓记事本,从主界面跳转到添加内容界面总是显示空白. 明明有setContentView xml文件在可视化开发环境下也正常显示.后经前辈指点,原来是复写onCreate函数时出现了问题 在安卓5.0版本之前onCreate函数默认为 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } 在安卓5.0版本提供了一个带Persistab