vue中刷新页面定位导航栏（解决刷新页面导航栏自动定位到首页的问题）

原創 oner的万能人 2018-11-04 03:35
1.页面刷新时，判断URL地址与左边导航栏定位是否相符（重点看图3的判断）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

PS1：window.location.hash返回从井号#开始的地址，例如http://aaa.com/#/action/aboutUs，window.location.hash获取的是#/action/aboutUs
PS2：Location对象属性

在这里插入图片描述

2.刷新页面，定位到相对应的导航栏

在这里插入图片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

JavaScript框架——Vue的基础语法

Vue簡介 JavaScript框架 簡化DOM操作 響應式數據驅動 引入Vue程序需要以下三個步驟： 導入從官網下載的Vue.js 創建Vue實例對象，設置el屬性和data屬性 使用簡潔的模板語法把數據渲染到頁面上 代碼

璀璨子 2020-07-02 13:32:50

VUE-2：自定义指令、事件

自定義指令（directive指令）         我們還可以通過 `Vue` 提供的方法來自定義指令 註冊指令         `vue` 提供了兩種指令註冊方式                 - 全局指令             

kino2046 2020-07-01 13:58:01

VUE-4：组件生命周期、动态组件、插件、动画

組件生命週期         組件生命週期指的是組件從創建到銷燬的過程，在這個過程中的一些不同的階段，`vue` 會調用指定的一些組件方法                 基本生命週期函數有下面幾個階段：                

kino2046 2020-07-01 12:28:53

VUE-6：路由2

路由組件傳參         我們通常把路由直接映射（綁定）的組件稱爲 路由組件，也只有路由組件才能直接調用路由有關對象：`$router`、`$route`         當我們一個組件即希望作爲路由組件使用，又可能作爲功能組件（某個

kino2046 2020-07-01 12:28:53

VUE-7：VUEX

爲什麼要用 vuex ？         首先，需要清楚爲什麼要用 vuex ，當我們的應用遇到 **多個組件共享狀態** 時                 - 多層級父子組件狀態傳遞會特別繁瑣                 - 非嵌

kino2046 2020-07-01 12:28:53

VUE-1：基础、指令、数据

vue.js         `vue.js` 是一套用於構建用戶界面的漸進式框架 漸進式 Vue 核心         - 聲明式渲染         - 組件 引入         我們還是先通過 \<script\> 的方式來引

kino2046 2020-07-01 12:28:53

VUE-3：组件

組件的註冊         在 `vue` 中，我們可以通過 `new Vue` 來創建一個組件，不過通常它是作爲整個應用的頂層根組件存在的，我們還可以通過另外的方式         來註冊一個更爲通用的組件 Vue.component

kino2046 2020-07-01 12:28:53

VUE-5：脚手架、调试、路由1

腳手架     https://cli.vuejs.org/zh/     vue-cli 是 vue 提供的一個用於自動化構建和開發項目的工具，也稱爲：腳手架，它是一系列工具的集合，它主要有：                 - 根據配

kino2046 2020-07-01 12:28:53

vue中mixins的理解及应用

vue中提供了一種混合機制--mixins，用來更高效的實現組件內容的複用。最開始我一度認爲這個和組件好像沒啥區別。。後來發現錯了。下面我們來看看mixins和普通情況下引入組件有什麼區別？ mixins 混合 (mixins) 是一種分

xueyue616 2020-06-24 14:46:53

浅谈Vue内置component组件的应用场景

這篇文章主要介紹了淺談Vue內置component組件的應用場景，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 官方的說明 渲染一個“元組件”爲動態組件。依 is 的值，來決定哪個組件被渲染。 1 2

xueyue616 2020-06-24 14:46:53

Vue自定义组件-动态组件

<template> <div class="page-list"> <span class="list-txt">{{ title }}</span> <!-- <ex-btn v-if="curren

xueyue616 2020-06-24 13:49:50

v-bind="$props"、v-bind="$attrs"、v-on="listeners"

之前看了一篇關於Vue開發技巧的文章,其中提到了在寫高級組件時,通過v-bind="$props"將props一次性向下傳遞。這種向下傳遞的方式我之前沒有用過,便看了下官網的介紹,並補充了一些相關API用法,在這裏記錄一下,方便自己以後查

xueyue616 2020-06-24 13:49:50

router-view和component :is的区别

他們的作用都是可以更換組件的顯示 router-view router-view是vueRouter的組件，主要是更新路由，可以不用跳轉到一個新的頁面，不會更新初始化函數mounted和created，只更新<router-view></

xueyue616 2020-06-24 13:49:16

Vue框架之Vue组件之间传值

◆ 父組件向子組件傳值： 父組件發送的形式是以屬性的形式綁定值到子組件身上。 然後子組件用屬性props接收 在props中使用駝峯形式，模板中需要使用短橫線的形式字符串形式的模板中沒有這個限制 <div id="app">

宅羽 2020-06-21 08:43:59

Vue框架之Vue脚手架

◆ Vue腳手架作用： Vue腳手架可以快速生成Vue項目基礎的架構。 ◆ Vue腳手架安裝： npm install -g @vue/cli 腳手架安裝報錯： npm ERR! code EPERM npm ERR! sysc

宅羽 2020-06-21 08:43:59