一、使用Vue Router的meta字段 使用Vue Router的meta字段来动态设置页面的title,可以通过以下步骤实现: 在路由配置中添加meta字段 在全局路由守卫中设置title 示例代码如下: 在路由配置中添加meta字段 // router/index.js import Vue from 'vue'; import Router from 'vue-router'; import Home from '@/views/Hom...
因此,我们需要动态的去设置meta的值。思路:借助Vue Router的路由独享守卫beforeEnter和 全局解析守卫beforeResolve 或全局后置钩子 afterEach实现。 修改代码如下: 1. 具体路由对象配置 { path:'template-operation/:id?/edit', beforeEnter: (to, from, next)=>{if(to.params.id) { to.meta.title= '编辑模板...
在src/router/index.js文件中,添加全局前置守卫beforeEach,在每次路由切换前设置页面标题: router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title; } next(); }); 确保导航守卫生效 确认导航守卫代码在router实例创建后生效: const router = new VueRouter({ rou...
component: user, meta:{ title:'个人中心' } } ] }) 2、在入口文件 main.js中添加 router.beforeEach 配置 以下代码 1 import Vue from 'vue' 2 import App from './App' 3 import router from './router' 4 router.beforeEach((to, from, next) => { 5 if (to.meta.title) { 6 document.t...
一般来说,如果不对vue中新打开的页面进行设置,会默认使用首页的title作为新打开的vue页面title。对vue-router跳转到的页面设置单独的页面title,分为如下2步: 在src中的router的router.js文件中 对需要单独设置页面title的路由,增加meta属性,在meta里面新增页面的title名字属性: ...
最近在项目中有一个这样的需求就是跳到详情页需要动态的名字,但是vue的router只能写一个title,于是乎就开始搞,终于搞出来了。 废话不多说,上代码 在要跳转的页面 importRouterfrom"@/router/index.js"Router.beforeEach((to,from,next)=>{console.log(to.meta)document.title=to.meta.title;next();})this.$...
1.这里主要是 meta 属性下面设置一个自定义的键值 title 2.在前置导航守卫里面如下: router.beforeEach((to,from,next)=>{// 根据路由元信息设置文档标题 window.document.title=to.meta.title||admin next()}) 3.完整的路由代码 importVue from'vue'importRouter from'vue-router'Vue.use(Router)// 定义路...
路由跳转 this.$router.push({path:'editMain',query:{id:1||2}}) 或路由配置 import('@/views/accountManagement/editMain'),beforeEnter:(to,from,next)=>{to.meta.title=to.query.titleNamenext()}, 路由跳转 this.$router.push({path:'editMain',query:{titleName:'动态路由名称'}}) ...
首先,你需要明白Vue Router的meta属性是静态的,不能动态地根据接口返回的数据来设置。但是,你可以在路由守卫(如全局前置守卫)中获取接口数据,并设置到路由的meta属性中。 以下是一个可能的实现方式: 在你的路由配置中,为需要设置meta的路由添加一个key值,比如: const routes = [ { path: '/detail/:id', name...
(1)在上文中我演示了当跳转到某个页面时,如何在这个页面组件内改变网页标题。还有种更方便的做法,那便是在全局的钩子函数beforeEach中获取meta中的title数据,并设置为页面标题。 1 2 3 4 5 //全局路由改变前钩子 router.beforeEach((to, from, next) => { ...