Vue-router(1)之路由基礎
阿新 • • 發佈:2018-11-22
1. 使用 <component>
標籤實現元件切換
<component>
是Vue提供的;有一個is屬性,is的作用就是顯示指定的元件
<template> <div> <h1>App根元件</h1> <div @click="comName='my-home'">home</div> <div @click="comName='my-movie'">movie</div> <div @click="comName='my-about'">about</div> <a href="#" @click.prevent="comName='my-home'">home</a> <a href="#" @click.prevent="comName='my-movie'">movie</a> <a href="#" @click.prevent="comName='my-about'">about</a> <!-- component 是由Vue官方提供的;作用,就是根據 is 屬性指定的名稱,來展示指定的元件--> <!-- 可以把 component 標籤,理解為 佔位符;指定什麼 名稱,就展示什麼元件 --> <component :is="comName"></component> </div> </template> <script> // 匯入需要被按需展示的元件 import Home from './Home.vue' import Movie from './Movie.vue' import About from './About.vue' export default { data() {return { // 指定 在頁面上要展示的元件名稱, 預設展示首頁 comName: 'my-home' } }, // 註冊私有元件 components: { 'my-home': Home, 'my-movie': Movie, 'my-about': About } } </script>
2. SPA單頁應用
2.1 錨鏈接及常規url的區別
-
普通的URL地址:會重新整理整個頁面;會追加瀏覽歷史記錄;
-
錨鏈接:不會觸發頁面的整體重新整理;會追加瀏覽歷史記錄;(錨鏈接是頁面內的跳轉)
2.2 什麼是SPA,為什麼有SPA
-
概念定義:SPA英文全稱是
Single Page Application
, 中文翻譯是 “單頁面應用程式”; -
通俗的理解是:只有一個Web頁面的網站;網站的所有功能都在這個唯一的頁面上進行展示與切換;
-
-
只有一個頁面
-
瀏覽器一開始請求這個頁面,必須載入對應的HTML, CSS, JavaScript
-
使用者的所有操作,都在這唯一的頁面上完成
-
頁面資料都是用Ajax請求回來的;
-
-
好處:
-
實現了前後端分離開發;
-
使用者體驗好、快,內容的改變不需要重新載入整個頁面;
-
-
缺點:
-
對SEO不是很友好,因為頁面資料是Ajax渲染出來的; 伺服器端渲染;
-
剛開始的時候載入速度可能比較慢;專案開發完畢之後,可以單獨對首屏頁面的載入時間做優化;
-
頁面複雜度比較高
2.3 原生實現SPA
使用 component 標籤的:is
屬性來切換元件
總結:單頁面應用程式中,實現元件切換的根本技術點,就是 監聽 window.onhashchange 事件:只要瀏覽器監聽到 Hash 值的變化,就會觸發指定的事件處理函式
<template> <div> <h1>App根元件</h1> <a href="#/home">首頁</a> <a href="#/movie">電影</a> <a href="#/about">關於</a> <component :is="comName"></component> </div> </template> <script> // 匯入需要的子元件 import Home from './Home.vue' import Movie from './Movie.vue' import About from './About.vue' export default { data() { return { comName: 'my-home' } }, created() { // 只要瀏覽器監聽到 Hash 值的變化,就會觸發指定的事件處理函式 window.onhashchange = () => { const hashStr = window.location.hash.slice(1) switch (hashStr) { case '/home': this.comName = 'my-home' break case '/movie': this.comName = 'my-movie' break case '/about': this.comName = 'my-about' break } } }, // 註冊私有子元件 components: { 'my-home': Home, 'my-movie': Movie, 'my-about': About } } </script>