路由改瀏覽器標(biāo)題和圖標(biāo)

 第一種方法：設(shè)置瀏覽器標(biāo)題

router/index.js

 第二種方法：設(shè)置瀏覽器標(biāo)題和圖標(biāo)

public/index.html

創(chuàng)建路由，隨路由顯示網(wǎng)頁(yè)標(biāo)題

從一個(gè)空白頁(yè)開(kāi)始創(chuàng)建路由，網(wǎng)頁(yè)標(biāo)題隨路由進(jìn)行改變。

先看一下效果，結(jié)尾有彩蛋

一、創(chuàng)建一個(gè)新的vue項(xiàng)目

把vue給我們?cè)O(shè)置的原始頁(yè)面home頁(yè)和about頁(yè)及其路由刪掉，留下空白頁(yè)，可以看到我這里的網(wǎng)頁(yè)標(biāo)題是我項(xiàng)目的名字，路由呢也是起始路由，沒(méi)有頁(yè)面。

二、路由映射的就是頁(yè)面

所以先要?jiǎng)?chuàng)建我們需要的頁(yè)面，vue的項(xiàng)目下views是放我們的頁(yè)面，一個(gè)首頁(yè)home，一個(gè)展示頁(yè)面show。

三、接下來(lái)就是創(chuàng)建我們這兩個(gè)頁(yè)面所需要的路由

vue項(xiàng)目下的router是創(chuàng)建頁(yè)面路由的地方，我們可以采取路由分模塊的形式，引入到router根目錄下的index。

代碼 ，show.js也是如此

//首頁(yè)路由， 及其匯總
export default {
    path:"/home",    //路由的路徑，會(huì)顯示在地址欄
    name:"home",     //路由的名稱(chēng)，后期項(xiàng)目做起來(lái)直接拿名稱(chēng)比較方便
    meta:{           //路由元信息
        title:'首頁(yè)',    //拿取當(dāng)前路由的title
        //這里邊還可設(shè)置其他的狀態(tài)，比如登錄的標(biāo)志，路由是否緩存的標(biāo)志
    },
    component: () => import ("@/views/Home"),    //路由映射的頁(yè)面
}

說(shuō)一下，這里為什么要這樣引入組件，采取了一種路由懶加載的模式，官網(wǎng)也有說(shuō)哈， 有的人會(huì)直接放一個(gè)頁(yè)面路徑，比如這樣：component："@/views/Home", 或者在上面 import Home from"@/views/Home" 進(jìn)來(lái)，component：Home， 

這樣也不是不可以只是項(xiàng)目大了加載會(huì)慢， 

官網(wǎng)原話(huà)，當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁(yè)面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪(fǎng)問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。

引入到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"},       //啟動(dòng)項(xiàng)目重定向到home頁(yè)面
  home, show,            //分路由進(jìn)入后在這里注冊(cè)一下
]
const router = new VueRouter({
  mode: 'history',         //分為hash和history模式，默認(rèn)是history，history帶#號(hào)，hash模式需要后臺(tái)進(jìn)行配置
  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:'首頁(yè)', path:'/home'},
        {title:'展示頁(yè)', path:'/show'},
      ]
    }
  }
}
</script>

vue提供了兩種存在歷史記錄的路由跳轉(zhuǎn)，router-link聲明式導(dǎo)航(就是寫(xiě)在標(biāo)簽里的)，必須屬性to，要跳轉(zhuǎn)的路由；router.push()，編程式導(dǎo)航(就是寫(xiě)在方法里的)，router.push( ’ 路徑 ’ ) 或者 router.push({path: ’ 路徑 ’ , query:‘攜帶的參數(shù)’})，這里我沒(méi)有聲明這個(gè)路由是動(dòng)態(tài)路由，但是依舊可以攜帶參數(shù)，

五、隨路由切換改變網(wǎng)頁(yè)標(biāo)題

其實(shí)這里有兩種辦法，前置和后置的路由守衛(wèi)

前置的，在main.js頁(yè)面使用，直接插入代碼就可以了

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"},       //啟動(dòng)項(xiàng)目重定向到home頁(yè)面
 home, show,            //分路由進(jìn)入后在這里注冊(cè)一下
]
const router = new VueRouter({
  mode: 'history',         //分為hash和history模式，默認(rèn)是history，history帶#號(hào)，hash模式需要后臺(tái)進(jìn)行配置
  routes,
})
router.afterEach((to, from) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
})
export default router

其實(shí)區(qū)別不大，唯一的區(qū)別就是后置的比較保險(xiǎn)一點(diǎn)，前置的是還沒(méi)有渲染頁(yè)面，路由一旦終止掉，頁(yè)面還沒(méi)有進(jìn)入，網(wǎng)頁(yè)標(biāo)題就已經(jīng)顯示了，后置的是路由完全進(jìn)入后，才會(huì)顯示網(wǎng)頁(yè)標(biāo)題?？醋约盒枰伞?/p>

六、創(chuàng)建子路由

例如創(chuàng)建home下的子路由，步驟和創(chuàng)建路由一樣，

在home下創(chuàng)建里兩個(gè)頁(yè)面。

在home的路由下創(chuàng)建homepage1和homepage2的子路由

再去把這兩個(gè)頁(yè)面渲染出來(lái)

插一個(gè)小知識(shí)：

路由的redirect是可以寫(xiě)成一個(gè)函數(shù)的，當(dāng)你有兩套頁(yè)面，根據(jù)身份id標(biāo)識(shí)來(lái)進(jìn)入到不同的頁(yè)面，比如我登錄了要進(jìn)入個(gè)人中心，個(gè)人中心有會(huì)員和工作人員，個(gè)人信息的頁(yè)面不一樣，但是都要進(jìn)來(lái)就要顯示個(gè)人信息頁(yè)，這時(shí)redirect就可以這樣寫(xiě)；

引入store 把標(biāo)識(shí)放到store中管理

判斷一下用戶(hù)的身份標(biāo)識(shí)，根據(jù)標(biāo)識(shí)重定向到什么頁(yè)面

redirect: to => {
   if('id標(biāo)識(shí)'){
        return "路由路徑"
    }else if('id標(biāo)識(shí)'){
        return "路由路徑"
    }
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論