vue设置路由title,实现在vue路由发生变化的时候,相应的页面title随之变化

最近用vue来做一个项目,到结尾的时候发现一个问题:不管开的是哪个组件的路由地址,网页的title都是index.html里面的title。下面总结一下解决的办法:

原先我使用的是document.title =to.meta.title来改变网页标题。

大家都知道使用Vue框架开发的应用是个单页面应用,里面用到的是路由的形式,并不像多页应用开发那样(下面附带区别)。所以想让网页的标题随着路由的改变而改变可以使用下面这个方法,目前已解决。

第一步:找到 router 文件夹下的index.js文件,在此引入:

第二步:在同文件下面的路由里面配置每个路由的地址:

第三步:在main.js 中写入以下代码去遍历每一个meta里面设置页面的title名字:

最后:这样就可以给每个路由对应的页面设置上了title,但是在我使用过程中遇到了个小问题。

如果页面跳转时要通过传参数去选择显示的子组件的话,这个方法实现不了,

我需要通过是否传tab=3去实现跳转的时候显示的是个人中心tab还是我的学习tab。这样title就不会变

这就有了下面这第二个方法:

在vue2中还可以使用vue-wechat-title插件来解决页面title的问题

第一步:在项目根目录下打开命令行通过npm install vue-wechat-title --save来安装插件,像下面这样就安装成功了

第二步:同上面的方法一样,在路由里面配置的每个地址加上对应的title;

第三步:在 main.js 中引入并使用插件就可以了

第四步:在src目录下的app.vue中修改router-view,加入下面的这个组件

如果以上这些都操作都完成了之后,重新加载一下你的页面应该就可以看到你设置的相应的title了~

以上是总结自己在项目中遇到的问题,当成日后的笔记来看、希望对大家有所帮助。写得稍微婆妈、大牛勿喷谢谢~

猜你喜欢

转载自www.cnblogs.com/nbb-hbb/p/9636093.html