vue中使用路由改瀏覽器標題和圖標
路由改瀏覽器標題和圖標
第一種方法：設置瀏覽器標題
router/index.js
第二種方法：設置瀏覽器標題和圖標
public/index.html
創(chuàng)建路由，隨路由顯示網頁標題
從一個空白頁開始創(chuàng)建路由，網頁標題隨路由進行改變。
先看一下效果，結尾有彩蛋
一、創(chuàng)建一個新的vue項目
把vue給我們設置的原始頁面home頁和about頁及其路由刪掉，留下空白頁，可以看到我這里的網頁標題是我項目的名字，路由呢也是起始路由，沒有頁面。
二、路由映射的就是頁面
所以先要創(chuàng)建我們需要的頁面，vue的項目下views是放我們的頁面，一個首頁home，一個展示頁面show。
三、接下來就是創(chuàng)建我們這兩個頁面所需要的路由
vue項目下的router是創(chuàng)建頁面路由的地方，我們可以采取路由分模塊的形式，引入到router根目錄下的index。
代碼 ，show.js也是如此
//首頁路由， 及其匯總
export default {
path:"/home", //路由的路徑，會顯示在地址欄
name:"home", //路由的名稱，后期項目做起來直接拿名稱比較方便
meta:{ //路由元信息
title:'首頁', //拿取當前路由的title
//這里邊還可設置其他的狀態(tài)，比如登錄的標志，路由是否緩存的標志
},
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:‘攜帶的參數’})，這里我沒有聲明這個路由是動態(tài)路由，但是依舊可以攜帶參數，
五、隨路由切換改變網頁標題
其實這里有兩種辦法，前置和后置的路由守衛(wèi)
前置的，在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
其實區(qū)別不大，唯一的區(qū)別就是后置的比較保險一點，前置的是還沒有渲染頁面，路由一旦終止掉，頁面還沒有進入，網頁標題就已經顯示了，后置的是路由完全進入后，才會顯示網頁標題?？醋约盒枰?。
六、創(chuàng)建子路由
例如創(chuàng)建home下的子路由，步驟和創(chuàng)建路由一樣，
在home下創(chuàng)建里兩個頁面。
在home的路由下創(chuàng)建homepage1和homepage2的子路由
再去把這兩個頁面渲染出來
插一個小知識：
路由的redirect是可以寫成一個函數的，當你有兩套頁面，根據身份id標識來進入到不同的頁面，比如我登錄了要進入個人中心，個人中心有會員和工作人員，個人信息的頁面不一樣，但是都要進來就要顯示個人信息頁，這時redirect就可以這樣寫；
引入store 把標識放到store中管理
判斷一下用戶的身份標識，根據標識重定向到什么頁面
redirect: to => {
if('id標識'){
return "路由路徑"
}else if('id標識'){
return "路由路徑"
}
}
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文介紹了vue 項目常用加載器及配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要給大家介紹了關于vite基本常見配置講解的相關資料,最近做項目要求將webpack打包方式換成vite,下面將詳細講解一下配置vite需要改動的東西,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了實現(xiàn)一個Vue自定義指令懶加載的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
基于Vue3+Three.js實現(xiàn)一個3D模型可視化編輯系統(tǒng)
這篇文章主要介紹了基于Vue3+Three.js實現(xiàn)一個3D模型可視化編輯系統(tǒng),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
今天小編就為大家分享一篇vue router 跳轉后回到頂部的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue如何使用百度地圖自定義信息窗口InfoWindow的樣式
這篇文章主要介紹了Vue如何使用百度地圖自定義信息窗口InfoWindow的樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
reactive是Vue3中提供實現(xiàn)響應式數據的方法，reactive的用法與ref的用法相似，也是將數據變成響應式數據，當數據發(fā)生變化時UI也會自動更新，這篇文章主要介紹了vue3 reactive函數用法,需要的朋友可以參考下2022-11-11
在 Vue 中,watch 屬性用于觀察和響應 Vue 實例上數據的變動,然而,默認情況下,watch 確實不會觸發(fā)組件創(chuàng)建時的變動,這里有幾種方式可以處理或繞過這個問題,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vueScroll實現(xiàn)移動端下拉刷新、上拉加載，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了Vuex模塊化和命名空間namespaced的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11