vue中使用路由改浏览器标题和图标
路由改浏览器标题和图标
第一种方法：设置浏览器标题
第二种方法：设置浏览器标题和图标
创建路由，随路由显示网页标题
一、创建一个新的vue项目
二、路由映射的就是页面
三、接下来就是创建我们这两个页面所需要的路由
四、渲染路由
五、随路由切换改变网页标题
六、创建子路由
路由改浏览器标题和图标 第一种方法：设置浏览器标题router/index.js
public/index.html
从一个空白页开始创建路由，网页标题随路由进行改变。
先看一下效果，结尾有彩蛋
把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 "路由路径"
}
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
