返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中使用路由改浏览器标题和图标
  • 303
分享到

vue中使用路由改浏览器标题和图标

2024-04-02 19:04:59 303人浏览 薄情痞子
摘要

目录路由改浏览器标题和图标 第一种方法:设置浏览器标题 第二种方法:设置浏览器标题和图标创建路由,随路由显示网页标题一、创建一个新的Vue项目二、路由映射的就是页

路由改浏览器标题和图标

 第一种方法:设置浏览器标题

router/index.js

 第二种方法:设置浏览器标题和图标

public/index.html

创建路由,随路由显示网页标题

从一个空白页开始创建路由,网页标题随路由进行改变。

先看一下效果,结尾有彩蛋

一、创建一个新的vue项目

把vue给我们设置的原始页面home页和about页及其路由删掉,留下空白页,可以看到我这里的网页标题是我项目的名字,路由呢也是起始路由,没有页面。

二、路由映射的就是页面

所以先要创建我们需要的页面,vue的项目下views是放我们的页面,一个首页home,一个展示页面show。

三、接下来就是创建我们这两个页面所需要的路由

vue项目下的router是创建页面路由的地方,我们可以采取路由分模块的形式,引入到router根目录下的index。

代码 ,show.js也是如此

//首页路由, 及其汇总
export default {
    path:"/home",    //路由的路径,会显示在地址栏
    name:"home",     //路由的名称,后期项目做起来直接拿名称比较方便
    meta:{           //路由元信息
        title:'首页',    //拿取当前路由的title
        //这里边还可设置其他的状态,比如登录的标志,路由是否缓存的标志
    },
    component: () => import ("@/views/Home"),    //路由映射的页面
}

说一下,这里为什么要这样引入组件,采取了一种路由懒加载的模式,官网也有说哈, 有的人会直接放一个页面路径,比如这样:component:"@/views/Home", 或者在上面 import Home from"@/views/Home" 进来,component:Home, 

这样也不是不可以只是项目大了加载会慢, 

官网原话,当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

引入到router根目录下的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from "./home.js";
import show from "./show.js";
Vue.use(VueRouter)
const routes = [
  {path:"/", redirect:"home"},       //启动项目重定向到home页面
  home, show,            //分路由进入后在这里注册一下
]
const router = new VueRouter({
  mode: 'history',         //分为hash和history模式,默认是history,history带#号,hash模式需要后台进行配置
  routes
})
export default router

四、渲染路由

<template>
  <div id="app">
    <router-link v-for="i in nav" :key="i.title" :to='i.path'>{{i.title}}</router-link>
    <router-view />
  </div>
</template>
<script>
export default {
  data(){
    return {
      nav:[
        {title:'首页', path:'/home'},
        {title:'展示页', path:'/show'},
      ]
    }
  }
}
</script>

vue提供了两种存在历史记录的路由跳转,router-link声明式导航(就是写在标签里的),必须属性to,要跳转的路由;router.push(),编程式导航(就是写在方法里的),router.push( ’ 路径 ’ ) 或者 router.push({path: ’ 路径 ’ , query:‘携带的参数’}),这里我没有声明这个路由是动态路由,但是依旧可以携带参数,

五、随路由切换改变网页标题

其实这里有两种办法,前置和后置的路由守卫

前置的,在main.js页面使用,直接插入代码就可以了

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

后置的,在router根目录下的index.js使用

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from "./home.js";
import show from "./show.js";
Vue.use(VueRouter)
const routes = [
 {path:"/", redirect:"home"},       //启动项目重定向到home页面
 home, show,            //分路由进入后在这里注册一下
]
const router = new VueRouter({
  mode: 'history',         //分为hash和history模式,默认是history,history带#号,hash模式需要后台进行配置
  routes,
})
router.afterEach((to, from) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
})
export default router

其实区别不大,唯一的区别就是后置的比较保险一点,前置的是还没有渲染页面,路由一旦终止掉,页面还没有进入,网页标题就已经显示了,后置的是路由完全进入后,才会显示网页标题。看自己需要吧。

六、创建子路由

例如创建home下的子路由,步骤和创建路由一样,

在home下创建里两个页面。

在home的路由下创建homepage1和homepage2的子路由

再去把这两个页面渲染出来

插一个小知识:

路由的redirect是可以写成一个函数的,当你有两套页面,根据身份id标识来进入到不同的页面,比如我登录了要进入个人中心,个人中心有会员和工作人员,个人信息的页面不一样,但是都要进来就要显示个人信息页,这时redirect就可以这样写;

引入store 把标识放到store中管理

判断一下用户的身份标识,根据标识重定向到什么页面

redirect: to => {
   if('id标识'){
        return "路由路径"
    }else if('id标识'){
        return "路由路径"
    }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue中使用路由改浏览器标题和图标

本文链接: https://lsjlt.com/news/167298.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue中使用路由改浏览器标题和图标
    目录路由改浏览器标题和图标 第一种方法:设置浏览器标题 第二种方法:设置浏览器标题和图标创建路由,随路由显示网页标题一、创建一个新的vue项目二、路由映射的就是页...
    99+
    2024-04-02
  • vue中修改浏览器图标和名字的几种方式
    目录前言1.修改图标样式01.使用图片02.使用图标2.修改浏览器名字设置01.直接修改02.根据后端的传值动态修改名字03.在vue中使用插件的方式04.路由守卫中进行修改总结前言...
    99+
    2022-11-13
    vue修改浏览器的标题 vue中修改浏览器图标不显示 更改浏览器图标
  • vue3.0如何修改浏览器标题(静态)
    目录vue3.0修改浏览器标题vue项目设置浏览器上方的项目标题和图标(注意图标放置位置)1.设置自定义图标注意点2.话不多说,直接上代码3.展示效果vue3.0修改浏览器标题 新建...
    99+
    2024-04-02
  • Vue设置浏览器小图标(ICON)的详细步骤
    目录Vue设置浏览器小图标第一步:准备logo图片信息第二步:拷贝ico图片到项目中第三步:添加图片链接到index.html中补充:修改浏览器名字设置总结Vue设置浏览器小图标 当...
    99+
    2023-01-03
    vue icon图标 vue 图标 vue设置浏览器小图标
  • vue动态设置浏览器标题的方法详解
    目录废话正文第一种router/index.js 第二种1.安装插件2.main.js 引用3.添加指令笔记总结 废话 平时设置浏览器标题是这样的 但vue是单页面应用,入口文件...
    99+
    2024-04-02
  • vue动态设置浏览器标题的方法有哪些
    这篇“vue动态设置浏览器标题的方法有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“v...
    99+
    2024-04-02
  • vue动态设置浏览器标题的方法是什么
    本篇文章给大家分享的是有关vue动态设置浏览器标题的方法是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。废话平时设置浏览器标题是这样的但vue是单页面应用,入口文件也只有一...
    99+
    2023-06-22
  • 设置vue动态浏览器标题的方法有哪些
    设置vue动态浏览器标题的方法有哪些,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。本篇文章给大家带来了关于怎样利用vue来实现动态设置浏览器标题的效果,希望对大...
    99+
    2023-06-22
  • 使用AvalonDock制作WPF多标签浏览器
    要使用AvalonDock制作WPF多标签浏览器,你可以按照以下步骤:1. 在Visual Studio中创建一个新的WPF应用程序...
    99+
    2023-09-12
    AvalonDock
  • vue 路由跳转打开新窗口被浏览器拦截问题处理
    触发事件请求接口根据条件去判断在进行路由跳转:   <a @click="getGetMyPortfolioById(scope.row) ">查看</a> ...
    99+
    2024-04-02
  • GoJs中标题和缩略图使用技巧
    目录前言标题的使用随图形变化的标题不随图形变化的标题缩略图的使用总结前言 在可视化图形中为了方便区分,需要给图形一个标题。可以在画布外面用html调整位置之后作为图形的标题,当然也可...
    99+
    2023-05-18
    GoJs标题缩略图使用 GoJs标题
  • vue中如何使用embed标签PDF预览
    目录使用embed标签PDF预览embed的四个属性使用vue-pdf预览开发正常,打包报错work.js404解决方式使用embed标签PDF预览 embed的四个属性 <...
    99+
    2024-04-02
  • vue中怎么使用embed标签PDF预览
    今天小编给大家分享一下vue中怎么使用embed标签PDF预览的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。使用embed标...
    99+
    2023-06-30
  • vue中使用iconfont图标的过程
    目录vue引入iconfont图标引入在线链接文件vue使用iconfont多色图标vue引入iconfont图标 引入在线链接文件 如果开发过程中需要不断更新图标,为了避免多次下载...
    99+
    2022-11-13
    vue iconfont图标 使用iconfont图标 vue中使用iconfont
  • win8中使用sfc命令修改浏览器不能使用问题
    到网上查了一下有说权限方面的,感觉应该不是,已我的使用习惯,从来都没有出现过权限方面的问题,觉得可能是这方面原因的读者请自己搜索关键字:“win8”、“IE10”、&ldq...
    99+
    2023-06-04
    win8 sfc命令 浏览器 问题 命令 sfc
  • 关于Vue中使用alibaba的iconfont矢量图标的问题
    网上有很多引入方法,官方也给出了三种引入方法,但是大多数人引入后都不会显示,或者是不能自定义样式,下面这种方法不会存在上面的那些问题,是目前最好的引入方式。 1、网址 阿里巴巴矢量图...
    99+
    2024-04-02
  • Ubuntu中如何使用Unity更改程序图标
    本篇内容主要讲解“Ubuntu中如何使用Unity更改程序图标”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Ubuntu中如何使用Unity更改程序图标”吧!在Unity桌面环境中,程序启动器实...
    99+
    2023-07-04
  • 详解vue中路由的安装和使用方法
    Vue 是一款流行的前端开发框架,它提供了诸多方便开发的工具和功能。其中,Vue 路由能够帮助我们创建单页应用程序,并且帮助我们实现路由功能。本篇文章将会介绍 Vue 路由的使用。Vue路由安装在开始使用 Vue 路由之前,我们需要先安装 ...
    99+
    2023-05-14
  • 记录一下谷歌浏览器在mac启动台生成网页图标的问题
    记录一下谷歌浏览器在mac启动台生成网页图标的问题 如图所示: 谷歌浏览器会在启动台中生成YouTube等网站的图标,个人看起来很烦,给大家提供一下删除方法! Finder->前往->个人 (Shi...
    99+
    2023-09-03
    macos
  • vue项目中更改名字和图标的简单实现步骤
    目录引言更改项目名称:vue更改图标事情没有结束:总结 引言 Vue项目开发最后一步:更改项目名称和图标。 没想到这一步卡了我两个多小时。 更改项目名称: 找到index...
    99+
    2022-11-13
    vue修改图标 vue项目怎么改名字 Vue图标
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作