运用Vue Router的进程守护修改单页的title

引入vue-router

import Vue from 'vue'
import Router from 'vue-router'
复制代码

在routes配置title

routes: [{          /* （首页）默认路由地址 */path: '/',name: 'index',component: Index,meta: {title: '首页'}},{          /* 列表 */path: '/list',name: 'list',component: list,meta: {title: '列表'}},{          /* 详情 */path: '/detail',name: 'detail',component: goodsDetail,meta: {title: '详情'}},{ /* Not Found 路由，必须是最后一个路由 */path: '*',component: NotFound,meta: {title: '找不到页面'}}]
复制代码

利用vue-router的进程守护，在进入每个页面的时候重置title

router.beforeEach((to, from, next) => {/* 路由发生变化修改页面title */if (to.meta.title) {document.title = to.meta.title}next()
})
复制代码

运用Vue Router的进程守护修改单页的title相关推荐

基于Vue.js的精选壁纸推荐单页应用
SENSE壁纸简介刚学习Vue.js, 写了一个精选壁纸推荐的小应用练练手, 该项目使用vue-cli构建.打包, 配合vue全家桶(vue.vuex.vue-router)进行开发.使用axio ...
修改html页面的title,可以自定义
方式一: document.getElementsByTagName("title")[0].innerText = '需要设置的值'; document.title方式经过测试 ...
【Linux】快速搭建一个基于Vue的大型单页应用
文章目录一.npm的安装二.cnpm的安装四.Vue的安装五.快速搭建大型单页应用六.运行截图开发环境:Ubuntu 20.0.4 一.npm的安装 sudo apt install np ...
discuz php单页,Discuz! X2 自定义单页面最简单方法
此方法简单到只有一句话:新建一个专题就行了,还可以自定义二级域名和URL,可以设置是否包括页头.页脚,Title/Keywords/description等信息自然不在话下. 新建完后就可以DIY,想 ...
单页应用的优缺点_单页和多页应用程序之间的优缺点
单页应用的优缺点 Currently, there are two ways of building websites: as multi-page applications (MPAs) or as ...
BUI 单页路由学习笔记
创建单页工程使用buijs命令行构建. 目前 >>我<< 只通过这种方式使用 buijs命令行创建demo成功过,其他暂无成功! 创建demo工程: # 创建目录 $ m ...
单页vue路由router
Vue.js + vue-router 可以很简单的实现单页应用. <router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容. to 属性为目标地址, ...
Vue Router路由模式的区别进程线程的区别
Vue Router hash模式和history模式的区别 hash模式url里面永远带着#号,我们在开发当中默认就是hash模式. 那么什么时候需要用到history模式呢? 肯定是用户觉得#号太 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
vue init webpack缺少标识符_vue 如何从单页应用改造成多页应用_vue.js
最近接到这样一个需求,将之前的三个项目合并成一个,并且要做成后台可配置化,前端动态引入组件的模板化框架. 听起来是不是很拗口...我自己当时都蒙了. 简单分析下需求,就是,项目A/B/C的内容是交叉的 ...

运用Vue Router的进程守护修改单页的title

运用Vue Router的进程守护修改单页的title相关推荐

最新文章

热门文章