Vue-小技巧

文章內容總結:

目錄

路由上默認的 #/：

路由懶加載寫法:

路由的項目啓動頁和404頁面

 DOM 事件修飾符

---

路由上默認的 #/：

問題：解除路由上默認的 #/ 。

場景:

// 去掉路由中自帶的 #/ 這種東西
  mode: 'history',

 

• 需要注意的是使用了 history 之後需要在服務器部署時增加一些配置，具體方法插件下面官方寫的配置方法 

---

 路由懶加載寫法:

    // 我所採用的方法，個人感覺比較簡潔一些，少了一步引入賦值。
    const router = new VueRouter({
      routes: [
        path: '/app',
        component: () => import('./app'),  // 引入組件
      ]
    })
    // Vue路由文檔的寫法:
    const app = () => import('./app.vue') // 引入組件
    const router = new VueRouter({
      routes: [
        { path: '/app', component: app }
      ]
    })

文檔的寫法在於問題在於：如果我們的路由比較多的話，是不是要在路由上方引入賦值十幾行組件？

第一種跟第二種方法相比就是把引入賦值的一步，直接寫在component上面，本質上是一樣的。兩種方式都可以的，大家自由選擇哈。

---

路由的項目啓動頁和404頁面

實際上這也就是一個設置而已:

    export default new Router({
      routes: [
        {
          path: '/', // 項目啓動頁
          redirect:'/login'  // 重定向到下方聲明的路由 
        },
        {
          path: '*', // 404 頁面 
          component: () => import('./notFind') // 或者使用component也可以的
        },
      ]
    })

---

 DOM 事件修飾符

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>