Vue 腳手架

来源:https://www.cnblogs.com/bugDiDiDi/p/18091954
-Advertisement-
Play Games

VUE 腳手架 腳手架文件結構 ├── node_modules ├── public │ ├── favicon.ico: 頁簽圖標 │ └── index.html: 主頁面 ├── src │ ├── assets: 存放靜態資源 │ │ └── logo.png │ │── componen ...


VUE 腳手架

腳手架文件結構

├── node_modules
├── public
│ ├── favicon.ico: 頁簽圖標
│ └── index.html: 主頁面
├── src
│ ├── assets: 存放靜態資源
│ │ └── logo.png
│ │── component: 存放組件
│ │ └── HelloWorld.vue
│ │── App.vue: 彙總所有組件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 應用包配置文件
├── README.md: 應用描述文件
├── package-lock.json：包版本控制文件

關於不同版本的Vue

  1. vue.js與vue.runtime.xxx.js的區別：
    1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
    2. vue.runtime.xxx.js是運行版的Vue，只包含：核心功能；沒有模板解析器。
  2. 因為vue.runtime.xxx.js沒有模板解析器，所以不能使用template這個配置項，需要使用render函數接收到的createElement函數去指定具體內容。

vue.config.js配置文件

  1. 使用vue inspect > output.js可以查看到Vue腳手架的預設配置。
  2. 使用vue.config.js可以對腳手架進行個性化定製，詳情見：https://cli.vuejs.org/zh

ref屬性

  1. 被用來給元素或子組件註冊引用信息（id的替代者）
  2. 應用在html標簽上獲取的是真實DOM元素，應用在組件標簽上是組件實例對象（vc）
  3. 使用方式：
    1. 打標識：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
    2. 獲取：this.$refs.xxx

props配置項

  1. 功能：讓組件接收外部傳過來的數據,影響範圍為本組件

  2. 傳遞數據：<Demo name="xxx"/>

  3. 接收數據：

    1. 第一種方式（只接收）：props:['name']

    2. 第二種方式（限制類型）：props:{name:String}

    3. 第三種方式（限制類型、限制必要性、指定預設值）：

      props:{
 name:{
 type:String, //類型
 required:true, //必要性
 default:'老王' //預設值
 }
}

    備註：props是只讀的，Vue底層會監測你對props的修改，如果進行了修改，就會發出警告，若業務需求確實需要修改，那麼請複製props的內容到data中一份，然後去修改data中的數據。

mixin(混入)

  1. 功能：可以把多個組件共用的配置提取成一個混入對象

  2. 使用方式：

    第一步定義混合：

    {
    data(){....},
    methods:{....}
    ....
}

    第二步使用混入：

    全局混入：Vue.mixin(xxx)
    局部混入：mixins:['xxx']

插件

  1. 功能：用於增強Vue

  2. 本質：包含install方法的一個對象，install的第一個參數是Vue，第二個以後的參數是插件使用者傳遞的數據。

  3. 定義插件：

    對象.install = function (Vue, options) {
    // 1. 添加全局過濾器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加實例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

  4. 使用插件：Vue.use()

scoped樣式

  1. 作用：讓樣式在局部生效，防止衝突。
  2. 寫法：<style scoped>

總結TodoList案例

  1. 組件化編碼流程：

    (1).拆分靜態組件：組件要按照功能點拆分，命名不要與html元素衝突。

    (2).實現動態組件：考慮好數據的存放位置，數據是一個組件在用，還是一些組件在用：

    ​ 1).一個組件在用：放在組件自身即可。

    ​ 2). 一些組件在用：放在他們共同的父組件上（狀態提升）。

    (3).實現交互：從綁定事件開始。

  2. props適用於：

    (1).父組件 ==> 子組件 通信

    (2).子組件 ==> 父組件 通信（要求父先給子一個函數）

  3. 使用v-model時要切記：v-model綁定的值不能是props傳過來的值，因為props是不可以修改的！

  4. props傳過來的若是對象類型的值，修改對象中的屬性時Vue不會報錯，但不推薦這樣做。

webStorage

  1. 存儲內容大小一般支持5MB左右（不同瀏覽器可能還不一樣）

  2. 瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實現本地存儲機制。

  3. 相關API：

    1. xxxxxStorage.setItem('key', 'value');
      該方法接受一個鍵和值作為參數，會把鍵值對添加到存儲中，如果鍵名存在，則更新其對應的值。

    2. xxxxxStorage.getItem('person');

      ​ 該方法接受一個鍵名作為參數，返回鍵名對應的值。

    3. xxxxxStorage.removeItem('key');

      ​ 該方法接受一個鍵名作為參數，並把該鍵名從存儲中刪除。

    4. xxxxxStorage.clear()

      ​ 該方法會清空存儲中的所有數據。

  4. 備註：

    1. SessionStorage存儲的內容會隨著瀏覽器視窗關閉而消失。
    2. LocalStorage存儲的內容，需要手動清除才會消失。
    3. xxxxxStorage.getItem(xxx)如果xxx對應的value獲取不到，那麼getItem的返回值是null。
    4. JSON.parse(null)的結果依然是null。

組件的自定義事件

  1. 一種組件間通信的方式，適用於：子組件 ===> 父組件

  2. 使用場景：A是父組件，B是子組件，B想給A傳數據，那麼就要在A中給B綁定自定義事件（事件的回調在A中）。

  3. 綁定自定義事件：

    1. 第一種方式，在父組件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>

    2. 第二種方式，在父組件中：

      <Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}

    3. 若想讓自定義事件只能觸發一次，可以使用once修飾符，或$once方法。

  4. 觸發自定義事件：this.$emit('atguigu',數據)

  5. 解綁自定義事件this.$off('atguigu')

  6. 組件上也可以綁定原生DOM事件，需要使用native修飾符。

  7. 註意：通過this.$refs.xxx.$on('atguigu',回調)綁定自定義事件時，回調要麼配置在methods中，要麼用箭頭函數，否則this指向會出問題！

全局事件匯流排（GlobalEventBus）

  1. 一種組件間通信的方式，適用於任意組件間通信。

  2. 安裝全局事件匯流排：

    new Vue({
   ......
   beforeCreate() {
      Vue.prototype.$bus = this //安裝全局事件匯流排，$bus就是當前應用的vm
   },
    ......
})

  3. 使用事件匯流排：

    1. 接收數據：A組件想接收數據，則在A組件中給$bus綁定自定義事件，事件的回調留在A組件自身。

      methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

    2. 提供數據：this.$bus.$emit('xxxx',數據)

  4. 最好在beforeDestroy鉤子中，用$off去解綁當前組件所用到的事件。

消息訂閱與發佈（pubsub）

  1. 一種組件間通信的方式，適用於任意組件間通信。

  2. 使用步驟：

    1. 安裝pubsub：npm i pubsub-js

    2. 引入: import pubsub from 'pubsub-js'

    3. 接收數據：A組件想接收數據，則在A組件中訂閱消息，訂閱的回調留在A組件自身。

      methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //訂閱消息
}

    4. 提供數據：pubsub.publish('xxx',數據)

    5. 最好在beforeDestroy鉤子中，用PubSub.unsubscribe(pid)去取消訂閱。

nextTick

  1. 語法：this.$nextTick(回調函數)
  2. 作用：在下一次 DOM 更新結束後執行其指定的回調。
  3. 什麼時候用：當改變數據後，要基於更新後的新DOM進行某些操作時，要在nextTick所指定的回調函數中執行。

Vue封裝的過度與動畫

  1. 作用：在插入、更新或移除 DOM元素時，在合適的時候給元素添加樣式類名。

  2. 圖示：

  3. 寫法：

    1. 準備好樣式：

      • 元素進入的樣式：
        1. v-enter：進入的起點
        2. v-enter-active：進入過程中
        3. v-enter-to：進入的終點
      • 元素離開的樣式：
        1. v-leave：離開的起點
        2. v-leave-active：離開過程中
        3. v-leave-to：離開的終點

    2. 使用<transition>包裹要過度的元素，並配置name屬性：

      <transition name="hello">
   <h1 v-show="isShow">你好啊！</h1>
</transition>

    3. 備註：若有多個元素需要過度，則需要使用：<transition-group>，且每個元素都要指定key值。

vue腳手架配置代理

方法一

在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:5000"
}

說明：

  1. 優點：配置簡單，請求資源時直接發給前端（8080）即可。
  2. 缺點：不能配置多個代理，不能靈活的控制請求是否走代理。
  3. 工作方式：若按照上述配置代理，當請求了前端不存在的資源時，那麼該請求會轉發給伺服器 （優先匹配前端資源）

方法二

編寫vue.config.js配置具體代理規則：

module.exports = {
   devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'開頭的請求路徑
        target: 'http://localhost:5000',// 代理目標的基礎路徑
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'開頭的請求路徑
        target: 'http://localhost:5001',// 代理目標的基礎路徑
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin設置為true時，伺服器收到的請求頭中的host為：localhost:5000
   changeOrigin設置為false時，伺服器收到的請求頭中的host為：localhost:8080
   changeOrigin預設值為true
*/

說明：

  1. 優點：可以配置多個代理，且可以靈活的控制請求是否走代理。
  2. 缺點：配置略微繁瑣，請求資源時必須加首碼。

插槽

  1. 作用：讓父組件可以向子組件指定位置插入html結構，也是一種組件間通信的方式，適用於 父組件 ===> 子組件 。

  2. 分類：預設插槽、具名插槽、作用域插槽

  3. 使用方式：

    1. 預設插槽：

      父組件中：
        <Category>
           <div>html結構1</div>
        </Category>
子組件中：
        <template>
            <div>
               <!-- 定義插槽 -->
               <slot>插槽預設內容...</slot>
            </div>
        </template>

    2. 具名插槽：

      父組件中：
        <Category>
            <template slot="center">
              <div>html結構1</div>
            </template>

            <template v-slot:footer>
               <div>html結構2</div>
            </template>
        </Category>
子組件中：
        <template>
            <div>
               <!-- 定義插槽 -->
               <slot name="center">插槽預設內容...</slot>
               <slot name="footer">插槽預設內容...</slot>
            </div>
        </template>

    3. 作用域插槽：

      1. 理解：數據在組件的自身，但根據數據生成的結構需要組件的使用者來決定。（games數據在Category組件中，但使用數據所遍歷出來的結構由App組件決定）

      2. 具體編碼：

        父組件中：
      <Category>
         <template scope="scopeData">
            <!-- 生成的是ul列表 -->
            <ul>
               <li v-for="g in scopeData.games" :key="g">{{g}}</li>
            </ul>
         </template>
      </Category>

      <Category>
         <template slot-scope="scopeData">
            <!-- 生成的是h4標題 -->
            <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
         </template>
      </Category>
子組件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
      
        <script>
            export default {
                name:'Category',
                props:['title'],
                //數據在子組件自身
                data() {
                    return {
                        games:['紅色警戒','穿越火線','勁舞團','超級瑪麗']
                    }
                },
            }
        </script>

Vuex

1.概念

​ 在Vue中實現集中式狀態（數據）管理的一個Vue插件，對vue應用中多個組件的共用狀態進行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用於任意組件間通信。

2.何時使用？

​ 多個組件需要共用數據時

3.搭建vuex環境

  1. 創建文件：src/store/index.js

    //引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//應用Vuex插件
Vue.use(Vuex)

//準備actions對象——響應組件中用戶的動作
const actions = {}
//準備mutations對象——修改state中的數據
const mutations = {}
//準備state對象——保存具體的數據
const state = {}

//創建並暴露store
export default new Vuex.Store({
   actions,
   mutations,
   state
})

  2. 在main.js中創建vm時傳入store配置項

    ......
//引入store
import store from './store'
......

//創建vm
new Vue({
   el:'#app',
   render: h => h(App),
   store
})

4.基本使用

  1. 初始化數據、配置actions、配置mutations，操作文件store.js

    //引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //響應組件中加的動作
   jia(context,value){
      // console.log('actions中的jia被調用了',miniStore,value)
      context.commit('JIA',value)
   },
}

const mutations = {
    //執行加
   JIA(state,value){
      // console.log('mutations中的JIA被調用了',state,value)
      state.sum += value
   }
}

//初始化數據
const state = {
   sum:0
}

//創建並暴露store
export default new Vuex.Store({
   actions,
   mutations,
   state,
})

  2. 組件中讀取vuex中的數據：$store.state.sum

  3. 組件中修改vuex中的數據：$store.dispatch('action中的方法名',數據) 或 $store.commit('mutations中的方法名',數據)

    備註：若沒有網路請求或其他業務邏輯，組件中也可以越過actions，即不寫dispatch，直接編寫commit

5.getters的使用

  1. 概念：當state中的數據需要經過加工後再使用時，可以使用getters加工。

  2. 在store.js中追加getters配置

    ......

const getters = {
   bigSum(state){
      return state.sum * 10
   }
}

//創建並暴露store
export default new Vuex.Store({
   ......
   getters
})

  3. 組件中讀取數據：$store.getters.bigSum

6.四個map方法的使用

  1. mapState方法：用於幫助我們映射state中的數據為計算屬性

    computed: {
    //藉助mapState生成計算屬性：sum、school、subject（對象寫法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //藉助mapState生成計算屬性：sum、school、subject（數組寫法）
    ...mapState(['sum','school','subject']),
},

  2. mapGetters方法：用於幫助我們映射getters中的數據為計算屬性

    computed: {
    //藉助mapGetters生成計算屬性：bigSum（對象寫法）
    ...mapGetters({bigSum:'bigSum'}),

    //藉助mapGetters生成計算屬性：bigSum（數組寫法）
    ...mapGetters(['bigSum'])
},

  3. mapActions方法：用於幫助我們生成與actions對話的方法，即：包含$store.dispatch(xxx)的函數

    methods:{
    //靠mapActions生成：incrementOdd、incrementWait（對象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（數組形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

  4. mapMutations方法：用於幫助我們生成與mutations對話的方法，即：包含$store.commit(xxx)的函數

    methods:{
    //靠mapActions生成：increment、decrement（對象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（對象形式）
    ...mapMutations(['JIA','JIAN']),
}

備註：mapActions與mapMutations使用時，若需要傳遞參數需要：在模板中綁定事件時傳遞好參數，否則參數是事件對象。

7.模塊化+命名空間

  1. 目的：讓代碼更好維護，讓多種數據分類更加明確。

  2. 修改store.js

    const countAbout = {
  namespaced:true,//開啟命名空間
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced:true,//開啟命名空間
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

  3. 開啟命名空間後，組件中讀取state數據：

    //方式一：自己直接讀取
this.$store.state.personAbout.list
//方式二：藉助mapState讀取：
...mapState('countAbout',['sum','school','subject']),

  4. 開啟命名空間後，組件中讀取getters數據：

    //方式一：自己直接讀取
this.$store.getters['personAbout/firstPersonName']
//方式二：藉助mapGetters讀取：
...mapGetters('countAbout',['bigSum'])

  5. 開啟命名空間後，組件中調用dispatch

    //方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：藉助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  6. 開啟命名空間後，組件中調用commit

    //方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：藉助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

路由

  1. 理解： 一個路由（route）就是一組映射關係（key - value），多個路由需要路由器（router）進行管理。
  2. 前端路由：key是路徑，value是組件。

1.基本使用

  1. 安裝vue-router，命令：npm i vue-router

  2. 應用插件：Vue.use(VueRouter)

  3. 編寫router配置項:

    //引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 組件
import About from '../components/About'
import Home from '../components/Home'

//創建router實例對象，去管理一組一組的路由規則
const router = new VueRouter({
   routes:[
      {
         path:'/about',
         component:About
      },
      {
         path:'/home',
         component:Home
      }
   ]
})

//暴露router
export default router

  4. 實現切換（active-class可配置高亮樣式）

    <router-link active-class="active" to="/about">About</router-link>

  5. 指定展示位置

    <router-view></router-view>

2.幾個註意點

  1. 路由組件通常存放在pages文件夾，一般組件通常存放在components文件夾。
  2. 通過切換，“隱藏”了的路由組件，預設是被銷毀掉的，需要的時候再去掛載。
  3. 每個組件都有自己的$route屬性，裡面存儲著自己的路由信息。
  4. 整個應用只有一個router，可以通過組件的$router屬性獲取到。

3.多級路由（多級路由）

  1. 配置路由規則，使用children配置項：

    routes:[
   {
      path:'/about',
      component:About,
   },
   {
      path:'/home',
      component:Home,
      children:[ //通過children配置子級路由
         {
            path:'news', //此處一定不要寫：/news
            component:News
         },
         {
            path:'message',//此處一定不要寫：/message
            component:Message
         }
      ]
   }
]

  2. 跳轉（要寫完整路徑）：

    <router-link to="/home/news">News</router-link>

4.路由的query參數

  1. 傳遞參數

    <!-- 跳轉並攜帶query參數，to的字元串寫法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳轉</router-link>
            
<!-- 跳轉並攜帶query參數，to的對象寫法 -->
<router-link 
   :to="{
      path:'/home/message/detail',
      query:{
         id:666,
            title:'你好'
      }
   }"
>跳轉</router-link>

  2. 接收參數：

    $route.query.id
$route.query.title

5.命名路由

  1. 作用：可以簡化路由的跳轉。

  2. 如何使用

    1. 給路由命名：

      {
   path:'/demo',
   component:Demo,
   children:[
      {
         path:'test',
         component:Test,
         children:[
            {
                      name:'hello' //給路由命名
               path:'welcome',
               component:Hello,
            }
         ]
      }
   ]
}

    2. 簡化跳轉：

      <!--簡化前，需要寫完整的路徑 -->
<router-link to="/demo/test/welcome">跳轉</router-link>

<!--簡化後，直接通過名字跳轉 -->
<router-link :to="{name:'hello'}">跳轉</router-link>

<!--簡化寫法配合傳遞參數 -->
<router-link 
   :to="{
      name:'hello',
      query:{
         id:666,
            title:'你好'
      }
   }"
>跳轉</router-link>

6.路由的params參數

  1. 配置路由，聲明接收params參數

    {
   path:'/home',
   component:Home,
   children:[
      {
         path:'news',
         component:News
      },
      {
         component:Message,
         children:[
            {
               name:'xiangqing',
               path:'detail/:id/:title', //使用占位符聲明接收params參數
               component:Detail
            }
         ]
      }
   ]
}

  2. 傳遞參數

    <!-- 跳轉並攜帶params參數，to的字元串寫法 -->
<router-link :to="/home/message/detail/666/你好">跳轉</router-link>
            
<!-- 跳轉並攜帶params參數，to的對象寫法 -->
<router-link 
   :to="{
      name:'xiangqing',
      params:{
         id:666,
            title:'你好'
      }
   }"
>跳轉</router-link>

    特別註意：路由攜帶params參數時，若使用to的對象寫法，則不能使用path配置項，必須使用name配置！

  3. 接收參數：

    $route.params.id
$route.params.title

7.路由的props配置

作用：讓路由組件更方便的收到參數

{
   name:'xiangqing',
   path:'detail/:id',
   component:Detail,

   //第一種寫法：props值為對象，該對象中所有的key-value的組合最終都會通過props傳給Detail組件
   // props:{a:900}

   //第二種寫法：props值為布爾值，布爾值為true，則把路由收到的所有params參數通過props傳給Detail組件
   // props:true
   
   //第三種寫法：props值為函數，該函數返回的對象中每一組key-value都會通過props傳給Detail組件
   props(route){
      return {
         id:route.query.id,
         title:route.query.title
      }
   }
}

8.<router-link>的replace屬性

  1. 作用：控制路由跳轉時操作瀏覽器歷史記錄的模式
  2. 瀏覽器的歷史記錄有兩種寫入方式：分別為push和replace，push是追加歷史記錄，replace是替換當前記錄。路由跳轉時候預設為push
  3. 如何開啟replace模式：<router-link replace .......>News</router-link>

9.編程式路由導航

  1. 作用：不藉助<router-link> 實現路由跳轉，讓路由跳轉更加靈活

  2. 具體編碼：

    //$router的兩個API
this.$router.push({
   name:'xiangqing',
      params:{
         id:xxx,
         title:xxx
      }
})

this.$router.replace({
   name:'xiangqing',
      params:{
         id:xxx,
         title:xxx
      }
})
this.$router.forward() //前進
this.$router.back() //後退
this.$router.go() //可前進也可後退

10.緩存路由組件

  1. 作用：讓不展示的路由組件保持掛載，不被銷毀。

  2. 具體編碼：

    <keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>

11.兩個新的生命周期鉤子

  1. 作用：路由組件所獨有的兩個鉤子，用於捕獲路由組件的激活狀態。
  2. 具體名字：
    1. activated路由組件被激活時觸發。
    2. deactivated路由組件失活時觸發。

12.路由守衛

  1. 作用：對路由進行許可權控制

  2. 分類：全局守衛、獨享守衛、組件內守衛

  3. 全局守衛:

    //全局前置守衛：初始化時執行、每次路由切換前執行
router.beforeEach((to,from,next)=>{
   console.log('beforeEach',to,from)
   if(to.meta.isAuth){ //判斷當前路由是否需要進行許可權控制
      if(localStorage.getItem('school') === 'atguigu'){ //許可權控制的具體規則
         next() //放行
      }else{
         alert('暫無許可權查看')
         // next({name:'guanyu'})
      }
   }else{
      next() //放行
   }
})

//全局後置守衛：初始化時執行、每次路由切換後執行
router.afterEach((to,from)=>{
   console.log('afterEach',to,from)
   if(to.meta.title){ 
      document.title = to.meta.title //修改網頁的title
   }else{
      document.title = 'vue_test'
   }
})

  4. 獨享守衛:

    beforeEnter(to,from,next){
   console.log('beforeEnter',to,from)
   if(to.meta.isAuth){ //判斷當前路由是否需要進行許可權控制
      if(localStorage.getItem('school') === 'atguigu'){
         next()
      }else{
         alert('暫無許可權查看')
         // next({name:'guanyu'})
      }
   }else{
      next()
   }
}

  5. 組件內守衛：

    //進入守衛：通過路由規則，進入該組件時被調用
beforeRouteEnter (to, from, next) {
},
//離開守衛：通過路由規則，離開該組件時被調用
beforeRouteLeave (to, from, next) {
}

13.路由器的兩種工作模式

  1. 對於一個url來說，什麼是hash值？—— #及其後面的內容就是hash值。

  2. hash值不會包含在 HTTP 請求中，即：hash值不會帶給伺服器。

  3. hash模式：

    1. 地址中永遠帶著#號，不美觀 。
    2. 若以後將地址通過第三方手機app分享，若app校驗嚴格，則地址會被標記為不合法。
    3. 相容性較好。

  4. history模式：

    1. 地址乾凈，美觀 。
    2. 相容性和hash模式相比略差。
    3. 應用部署上線時需要後端人員支持，解決刷新頁面服務端404的問題。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL 8.0 Reference Manual（讀書筆記68節--Deadlocks）
    背景 近年來隨著國際形勢的變化，信創產業成為我國國家戰略的一部分。一直以來，一直以來，全球 ICT 產業底層標準、架構、產品、生態等要素均由國外公司或機構制定和控制，使我國 ICT 產業乃至廣大用戶面臨被卡脖子、數據泄露、信息安全等諸多風險，尤其是 2018年以來，中興、華為等公司的遭遇成為鮮活的實 ...
  • 鴻蒙HarmonyOS實戰-ArkUI組件（RelativeContainer）
    一、RelativeContainer 1.概述 ArkUI組件中的RelativeContainer是一個相對定位的容器，可以用來將子組件按照相對位置佈局。 在RelativeContainer中，每個子組件都可以設置相對於父容器或其他組件的位置和大小。可以通過設置相對位置、偏移量、寬度和 ...
  • 鴻蒙HarmonyOS實戰-ArkUI組件（Flex）
    一、Flex 1.概述 Flex佈局它可以讓容器中的子元素具有彈性伸縮性。Flex佈局是一種二維佈局模型，它可以在任意方向上對元素進行排列，並且可以動態地調整元素的大小和位置，以適應不同的屏幕尺寸和設備。通過使用Flex佈局，我們可以實現響應式佈局效果，以適應不同的屏幕尺寸和設備。Flex布 ...
  • 使用 adb 命令修改 Android/data 目錄下的文件(給碧藍檔案國服吃布丁)
    本文記錄如何使用 adb 命令修改 Android/data 目錄下的文件，然後給國服的碧藍檔案打上布丁~ 前言 今天下午刷著刷著微博就看到國服 BA 又又又發了和諧公告 ... 心情複雜。jpg 於是乎終於想起來得吃布丁了，至於此次更新後布丁有沒有用還未知，但還是先搞上 食用方法之前就出了 ...
  • flutter3-dylive仿抖音App實例|Flutter3+Getx實戰短視頻直播應用
    原創研發flutter3+getX+mediaKit仿抖音app短視頻直播實戰Flutter-DouYin。 flutter3_dylive使用最新跨平臺技術flutter3.x+dart3+getx+get_storage+media_kit開發手機端仿抖音app小視頻直播實戰項目。實現了抖音全屏 ...
  • 鴻蒙HarmonyOS實戰-ArkUI組件（Stack）
    一、Stack 1.概述 HarmonyOS中的層疊佈局Stack是一種可以將多個組件按照一定順序疊放的佈局。Stack佈局中的組件可以是任意類型的組件，且每個組件都可以設置在哪個位置疊放。在疊放時，後添加的組件會自動覆蓋前面添加的組件。 Stack佈局佈局中的每個子組件都可以設置偏移量、旋 ...
  • 如何理解TCP/IP協議?
    一、是什麼 TCP/IP，傳輸控制協議/網際協議，是指能夠在多個不同網路間實現信息傳輸的協議簇 TCP（傳輸控制協議） 一種面向連接的、可靠的、基於位元組流的傳輸層通信協議 IP（網際協議） 用於封包交換數據網路的協議 TCP/IP協議不僅僅指的是TCP和IP兩個協議，而是指一個由FTP、SMTP、T ...
  • 任何樣式，javascript都可以操作，讓你所向披靡
    前言 習慣了在 css 文件裡面編寫樣式，其實JavaScript 的 CSS對象模型也提供了強大的樣式操作能力， 那就隨文章一起看看，有多少能力是你不知道的吧。 樣式來源 客從八方來， 樣式呢， 樣式五方來。 chrome舊版本用戶自定義樣式目錄： %LocalAppData%/Google/Ch ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類