那些被人忽略的Vue導航知識

本篇學習目標

  1. 能夠了解單頁面應用概念和優缺點
  2. 能夠掌握vue-router路由系統使用
  3. 能夠掌握鏈接導航和編程式導航用法
  4. 能夠掌握路由嵌套和路由守衛
  5. 能夠掌握vant組件庫基礎使用

1. vue路由簡介和基礎使用

1.0 什么是路由

目標: 設備和ip的映射關系
在這里插入圖片描述

目標: 接口和服務的映射關系
在這里插入圖片描述

目標: 路徑和組件的映射關系
在這里插入圖片描述

1.1 為什么使用路由

目標: 在一個頁面里, 切換業務場景

具體使用示例: 網易云音樂 https://music.163.com/

單頁面應用(SPA): 所有功能在一個html頁面上實現

前端路由作用: 實現業務場景切換

優點：

  • 整體不刷新頁面，用戶體驗更好

  • 數據傳遞容易, 開發效率高

缺點：

  • 開發成本高(需要學習專門知識)

  • 首次加載會比較慢一點。不利于seo

1.2 vue-router介紹

目標: 如何在Vue項目中集成路由

官網: https://router.vuejs.org/zh/

vue-router模塊包

它和 Vue.js 深度集成

可以定義 - 視圖表(映射規則)

模塊化的

提供2個內置全局組件

聲明式導航自動激活的 CSS class 的鏈接

……

1.3 路由 - 組件分類

目標: .vue文件分2類, 一個是頁面組件, 一個是復用組件

.vue文件本質無區別, 方便大家學習和理解, 總結的一個經驗

src/views(或pages) 文件夾 和 src/components文件夾

  • 頁面組件 - 頁面展示 - 配合路由用
  • 復用組件 - 展示數據/常用于復用

在這里插入圖片描述

總結: views下的頁面組件, 配合路由切換, components下的一般引入到views下的vue中復用展示數據

1.4 vue-router使用

目標: 學會vue官方提供的vue-router路由系統功能模塊使用

App.vue - 頁面標簽和樣式準備(可復制繼續寫)

<template><div><div class="footer_wrap"><a href="#/find">發現音樂</a><a href="#/my">我的音樂</a><a href="#/part">朋友</a></div><div class="top"></div></div>
</template><script>
export default {};
</script><style scoped>
.footer_wrap {position: fixed;left: 0;top: 0;display: flex;width: 100%;text-align: center;background-color: #333;color: #ccc;
}
.footer_wrap a {flex: 1;text-decoration: none;padding: 20px 0;line-height: 20px;background-color: #333;color: #ccc;border: 1px solid black;
}
.footer_wrap a:hover {background-color: #555;
}
.top {padding-top: 62px;
}
</style>

vue-router文檔

  • 安裝
yarn add vue-router
  • 導入路由
import VueRouter from 'vue-router'
  • 使用路由插件
// 在vue中，使用使用vue的插件，都需要調用Vue.use()
Vue.use(VueRouter)
  • 創建路由規則數組
const routes = [{path: "/find",component: Find},{path: "/my",component: My},{path: "/part",component: Part}
]
  • 創建路由對象 - 傳入規則
const router = new VueRouter({routes
})
  • 關聯到vue實例
new Vue({router
})
  • components換成router-view
<router-view></router-view>

總結: 下載路由模塊, 編寫對應規則注入到vue實例上, 使用router-view掛載點顯示切換的路由

總結2: 一切都圍繞著hash值變化為準

2. vue路由 - 聲明式導航

2.0 聲明式導航 - 基礎使用

目標: 可用全局組件router-link來替代a標簽

  1. vue-router提供了一個全局組件 router-link
  2. router-link實質上最終會渲染成a鏈接 to屬性等價于提供 href屬性(to無需#)
  3. router-link提供了聲明式導航高亮的功能(自帶類名)
<template><div><div class="footer_wrap"><router-link to="/find">發現音樂</router-link><router-link to="/my">我的音樂</router-link><router-link to="/part">朋友</router-link></div><div class="top"><router-view></router-view></div></div>
</template><script>
export default {};
</script><style scoped>
/* 省略了 其他樣式 */
.footer_wrap .router-link-active{color: white;background: black;
}
</style>

總結: 鏈接導航, 用router-link配合to, 實現點擊切換路由

2.1 聲明式導航 - 跳轉傳參

目標: 在跳轉路由時, 可以給路由對應的組件內傳值

在router-link上的to屬性傳值, 語法格式如下

  • /path?參數名=值

  • /path/值 – 需要路由對象提前配置 path: “/path/參數名”

對應頁面組件接收傳遞過來的值

  • $route.query.參數名

  • $route.params.參數名

  1. 創建components/Part.vue - 準備接收路由上傳遞的參數和值

    <template><div><p>關注明星</p><p>發現精彩</p><p>尋找伙伴</p><p>加入我們</p><p>人名: {{ $route.query.name }} -- {{ $route.params.username }}</p></div>
</template>

  2. 路由定義

    {path: "/part",component: Part},{path: "/part/:username", // 有:的路徑代表要接收具體的值component: Part},

  3. 導航跳轉, 傳值給MyGoods.vue組件

    <router-link to="/part?name=小傳">朋友-小傳</router-link>
<router-link to="/part/小智">朋友-小智</router-link>

總結:

?key=value 用$route.query.key 取值

/值 提前在路由規則/path/:key 用$route.params.key 取值

3. vue路由 - 重定向和模式

3.0 路由 - 重定向

目標: 匹配path后, 強制切換到目標path上

  • 網頁打開url默認hash值是/路徑
  • redirect是設置要重定向到哪個路由路徑

例如: 網頁默認打開, 匹配路由"/", 強制切換到"/find"上

const routes = [{path: "/", // 默認hash值路徑redirect: "/find" // 重定向到/find// 瀏覽器url中#后的路徑被改變成/find-重新匹配數組規則}
]

總結: 強制重定向后, 還會重新來數組里匹配一次規則

3.1 路由 - 404頁面

目標: 如果路由hash值, 沒有和數組里規則匹配

默認給一個404頁面

語法: 路由最后, path匹配*(任意路徑) – 前面不匹配就命中最后這個, 顯示對應組件頁面

  1. 創建NotFound頁面

    <template><img src="../assets/404.png" alt="">
</template><script>
export default {}
</script><style scoped>img{width: 100%;}
</style>

  2. 在main.js - 修改路由配置

    import NotFound from '@/views/NotFound'const routes = [// ...省略了其他配置// 404在最后(規則是從前往后逐個比較path){path: "*",component: NotFound}
]

總結: 如果路由未命中任何規則, 給出一個兜底的404頁面

3.2 路由 - 模式設置

目標: 修改路由在地址欄的模式

hash路由例如: http://localhost:8080/#/home

history路由例如: http://localhost:8080/home (以后上線需要服務器端支持, 否則找的是文件夾)

模式文檔

router/index.js

const router = new VueRouter({routes,mode: "history" // 打包上線后需要后臺支持, 模式是hash
})

4. vue路由 - 編程式導航

用JS代碼跳轉, 聲明式導航用a標簽

4.0 編程式導航 - 基礎使用

目標: 用JS代碼來進行跳轉

語法:

this.$router.push({path: "路由路徑", // 都去 router/index.js定義name: "路由名"
})
  1. main.js - 路由數組里, 給路由起名字
{path: "/find",name: "Find",component: Find
},
{path: "/my",name: "My",component: My
},
{path: "/part",name: "Part",component: Part
},
  1. App.vue - 換成span 配合js的編程式導航跳轉
<template><div><div class="footer_wrap"><span @click="btn('/find', 'Find')">發現音樂</span><span @click="btn('/my', 'My')">我的音樂</span><span @click="btn('/part', 'Part')">朋友</span></div><div class="top"><router-view></router-view></div></div>
</template><script>
// 目標: 編程式導航 - js方式跳轉路由
// 語法:
// this.$router.push({path: "路由路徑"})
// this.$router.push({name: "路由名"})
// 注意:
// 雖然用name跳轉, 但是url的hash值還是切換path路徑值
// 場景:
// 方便修改: name路由名(在頁面上看不見隨便定義)
// path可以在url的hash值看到(盡量符合組內規范)
export default {methods: {btn(targetPath, targetName){// 方式1: path跳轉this.$router.push({// path: targetPath,name: targetName})}}
};
</script>

4.1 編程式導航 - 跳轉傳參

目標: JS跳轉路由, 傳參

語法 query / params 任選 一個

this.$router.push({path: "路由路徑"name: "路由名",query: {"參數名": 值}params: {"參數名": 值}
})// 對應路由接收   $route.params.參數名   取值
// 對應路由接收   $route.query.參數名    取值

格外注意: 使用path會自動忽略params

App.vue

<template><div><div class="footer_wrap"><span @click="btn('/find', 'Find')">發現音樂</span><span @click="btn('/my', 'My')">我的音樂</span><span @click="oneBtn">朋友-小傳</span><span @click="twoBtn">朋友-小智</span></div><div class="top"><router-view></router-view></div></div>
</template><script>
// 目標: 編程式導航 - 跳轉路由傳參
// 方式1:
// params => $route.params.參數名
// 方式2:
// query => $route.query.參數名
// 重要: path會自動忽略params
// 推薦: name+query方式傳參
// 注意: 如果當前url上"hash值和?參數"與你要跳轉到的"hash值和?參數"一致, 爆出冗余導航的問題, 不會跳轉路由
export default {methods: {btn(targetPath, targetName){// 方式1: path跳轉this.$router.push({// path: targetPath,name: targetName})},oneBtn(){this.$router.push({name: 'Part',params: {username: '小傳'}})},twoBtn(){this.$router.push({name: 'Part',query: {name: '小智'}})}}
};
</script>

總結: 傳參2種方式

query方式

params方式

5. vue路由 - 嵌套和守衛

5.0 vue路由 - 路由嵌套

目標: 在現有的一級路由下, 再嵌套二級路由

二級路由示例-網易云音樂-發現音樂下

router-view嵌套架構圖

  1. 創建需要用的所有組件

    src/views/Find.vue – 發現音樂頁

    src/views/My.vue – 我的音樂頁

    src/views/Second/Recommend.vue – 發現音樂頁 / 推薦頁面

    src/views/Second/Ranking.vue – 發現音樂頁 / 排行榜頁面

    src/views/Second/SongList.vue – 發現音樂頁 / 歌單頁面

  2. main.js– 繼續配置2級路由

    一級路由path從/開始定義

    二級路由往后path直接寫名字, 無需/開頭

    嵌套路由在上級路由的children數組里編寫路由信息對象

  3. 說明：

    App.vue的router-view負責發現音樂和我的音樂頁面, 切換

    Find.vue的的router-view負責發現音樂下的, 三個頁面, 切換

在這里插入圖片描述

  1. 配置二級導航和樣式(可直接復制) - 在Find.vue中
<template><div><!-- <p>推薦</p><p>排行榜</p><p>歌單</p> --><div class="nav_main"><router-link to="/find/recommend">推薦</router-link><router-link to="/find/ranking">排行榜</router-link><router-link to="/find/songlist">歌單</router-link></div><div style="1px solid red;"><router-view></router-view></div></div>
</template><script>
export default {};
</script><style scoped>
.nav_main {background-color: red;color: white;padding: 10px 0;
}
.nav_main a {text-align: center;text-decoration: none;color: white;font-size: 12px;margin: 7px 17px 0;padding: 0px 15px 2px 15px;height: 20px;display: inline-block;line-height: 20px;border-radius: 20px;
}
.nav_main a:hover {background-color: brown;
}
.nav_main .router-link-active{background-color: brown;
}
</style>
  1. 配置路由規則-二級路由展示
const routes = [// ...省略其他{path: "/find",name: "Find",component: Find,children: [{path: "recommend",component: Recommend},{path: "ranking",component: Ranking},{path: "songlist",component: SongList}]}// ...省略其他
]
  1. 說明：

  • App.vue, 外層的router-view負責發現音樂和我的音樂頁面切換

  • Find.vue 內層的router-view負責發現音樂下的子tab對應的組件切換

  1. 運行 - 點擊導航觀察嵌套路由在哪里展示

總結: 嵌套路由, 找準在哪個頁面里寫router-view和對應規則里寫children

5.1 聲明導航 - 類名區別

目標: router-link自帶的2個類名的區別是什么

觀察路由嵌套導航的樣式

  • router-link-exact-active (精確匹配) url中hash值路徑, 與href屬性值完全相同, 設置此類名

  • router-link-active (模糊匹配) url中hash值, 包含href屬性值這個路徑

在這里插入圖片描述

5.2 全局前置守衛

目標: 路由跳轉之前, 先執行一次前置守衛函數, 判斷是否可以正常跳轉

使用例子: 在跳轉路由前, 判斷用戶登陸了才能去<我的音樂>頁面, 未登錄彈窗提示回到發現音樂頁面

  1. 在路由對象上使用固定方法beforeEach
// 目標: 路由守衛
// 場景: 當你要對路由權限判斷時
// 語法: router.beforeEach((to, from, next)=>{//路由跳轉"之前"先執行這里, 決定是否跳轉})
// 參數1: 要跳轉到的路由 (路由對象信息)    目標
// 參數2: 從哪里跳轉的路由 (路由對象信息)  來源
// 參數3: 函數體 - next()才會讓路由正常的跳轉切換, next(false)在原地停留, next("強制修改到另一個路由路徑上")
// 注意: 如果不調用next, 頁面留在原地// 例子: 判斷用戶是否登錄, 是否決定去"我的音樂"/my
const isLogin = true; // 登錄狀態(未登錄)
router.beforeEach((to, from, next) => {if (to.path === "/my" && isLogin === false) {alert("請登錄")next(false) // 阻止路由跳轉} else {next() // 正常放行}
})

總結: next()放行, next(false)留在原地不跳轉路由, next(path路徑)強制換成對應path路徑跳轉

補充知識

1. vant組件庫

1.0 vant組件庫-介紹

目標: vant是一個輕量、可靠的移動端 Vue 組件庫, 開箱即用

vant官網

特點:

  • 提供 60 多個高質量組件，覆蓋移動端各類場景
  • 性能極佳，組件平均體積不到 1kb
  • 完善的中英文文檔和示例
  • 支持 Vue 2 & Vue 3
  • 支持按需引入和主題定制

1.1 全部引入

目標: 看官網文檔, 下載, 引入vant組件庫

全部引入, 快速開始:https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

1.全部引入, 快速開始: https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

2.下載Vant組件庫到當前項目中

3.在main.js中全局導入所有組件,

4.使用按鈕組件 – 作為示范的例子

在這里插入圖片描述

  1. 下載vant組件庫到當前項目中

    yarn add vant -D

  2. 導入所有組件, 在main.js中

    import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';Vue.use(Vant);

  3. 使用按鈕組件

    https://vant-contrib.gitee.io/vant/#/zh-CN/button

    <van-button type="primary">主要按鈕</van-button>
<van-button type="info">信息按鈕</van-button>
<van-button type="default">默認按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險按鈕</van-button>

1.2 手動按需引入

目標: 只引入使用的組件

在這里插入圖片描述

1.手動單獨引入, 快速開始: https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

// 方式2: 手動 按需引入
// import Button from 'vant/lib/button'; // button組件
// import 'vant/lib/button/style'; // button樣式
  1. 注冊
// components: { // 手動注冊組件名
//   // VanButton: Button
//   // 等價的
//   [Button.name]: Button
// }
  1. 使用
<van-button type="primary">主要按鈕</van-button>
<van-button type="info">信息按鈕</van-button>
<van-button type="default">默認按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險按鈕</van-button>

1.3 自動按需引入

目標: 按需加載組件

babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式。

  1. 安裝插件

    yarn add babel-plugin-import -D

  2. 在babel配置文件里 (babel.config.js)

    module.exports = {plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
};

  3. 全局注冊 - 會自動按需引入

    // 方式1: 全局 - 自動按需引入vant組件
// (1): 下載 babel-plugin-import
// (2): babel.config.js - 添加官網說的配置 (一定要重啟服務器)
// (3): main.js 按需引入某個組件, Vue.use全局注冊 - 某個.vue文件中直接使用vant組件
import { Button } from 'vant';
Vue.use(Button) // Button組件全局注冊, 真正注冊的組件名VanButton

1.4 彈出框使用

目標: 使用彈出框組件

在這里插入圖片描述

https://vant-contrib.gitee.io/vant/#/zh-CN/dialog

<template><div><van-button type="primary" @click="btn">主要按鈕</van-button><van-button type="info">信息按鈕</van-button><van-button type="default">默認按鈕</van-button><van-button type="warning">警告按鈕</van-button><van-button type="danger">危險按鈕</van-button></div>
</template><script>
// 方式2: 手動 按需引入
// import Button from 'vant/lib/button'; // button組件
// import 'vant/lib/button/style'; // button樣式// 目標: 使用彈出框
// 1. 找到vant文檔
// 2. 引入
// 3. 在恰當時機, 調用此函數 (還可以用組件的用法)
import { Dialog } from "vant";
export default {// components: { // 手動注冊組件名//   // VanButton: Button//   // 等價的//   [Button.name]: Button// }methods: {btn() {Dialog({ message: "提示", showCancelButton: true }); // 調用執行時, 頁面就會出彈出框},},
};
</script>

1.5 表單使用

目標: 使用vant組件里的表單組件

https://vant-contrib.gitee.io/vant/#/zh-CN/form

在這里插入圖片描述

表單驗證規則:

在這里插入圖片描述

今日總結

  • 了解什么是單頁面應用, 以及優缺點

  • 了解組件分為哪2類

  • 路由的本質是什么, 就是改變url的hash值, 讓js監聽到, 根據配置好的映射規則, 顯示不同的DOM

  • 聲明式導航router-link是vue-router封裝注冊的全局組件, 比a標簽好處是封裝了高亮類名等

  • 編程式導航, 用Vue內置的方法改變瀏覽器url, this.$router.push()

  • 路由跳轉傳參總結

    跳轉方法傳參位置路由規則接收
    /path?key=value無特殊$route.query.key
    /path/值/path/:key$route.params.key
    this.$router.push({path: “/path”, query: {key: value}})query的對象無特殊$route.query.key
    this.$router.push({name: “com”, params: {key: value})params的對象路由規則需要name屬性$route.params.key(注意,這種在內存中保存)

    無論哪種格式, 聲明式和編程式都是通用的, 保證路徑和參數格式正確就ok

  • 路由重定向, 在配置項上使用redirect到目標路由路徑

  • 嵌套路由就是在某個一級頁面中, 在嵌套一套路由切換系統

    • 在路由規則里找到一級路由, 寫children: [] 注意: 除了第一層一級路由path寫/, 子的開頭都無需/
    • 跳轉時, 要去的路由路徑從一級開始寫
    • 心中要做到 瀏覽器url 路由值 和路由規則里的path 對上即可

  • 全局路由前置守衛 - 可以在跳轉路由前進行一些權限判斷

  • vant組件庫是封裝好的組件, 我們拿來即可使用

面試題

1. 路由之間是怎么跳轉的？有哪些方式

1、

2、this.$router.push()跳轉到指定的url，并在history中添加記錄，點擊回退返回到上一個頁面

3、this.$router.replace()跳轉到指定的url，但是history中不會添加記錄，點擊回退到上上個頁面

4、this.$touter.go(n)向前或者后跳轉n個頁面，n可以是正數也可以是負數

2. vue-router怎么配置路由

在vue中配置路由分為5個步驟，分別是：

  1. 引入vue-router.js
  2. 配置路由path和組件, 和生成路由對象
  3. 把路由對象配置到new Vue中router選項下
  4. 頁面使用 承載路由
  5. 設置路由導航(聲明式導航方式/編程式跳轉)

3. vue-router的鉤子函數都有哪些

關于vue-router中的鉤子函數主要分為3類

全局鉤子函數要包含beforeEach

beforeEach函數有三個參數,分別是:

? to:router即將進入的路由對象
? from:當前導航即將離開的路由
? next:function,進行管道中的一個鉤子，如果執行完了,則導航的狀態就是 confirmed （確認的）否則為false,終止導航。

單獨路由獨享組件

? beforeEnter,

組件內鉤子

beforeRouterEnter，
beforeRouterUpdate,
beforeRouterLeave

4. 路由傳值的方式有哪幾種

Vue-router傳參可以分為兩大類，分別是編程式的導航 router.push和聲明式的導航

router.push

字符串：直接傳遞路由地址，但是不能傳遞參數

? this.$router.push(“home”)

? 對象：

? 命名路由 這種方式傳遞參數，目標頁面刷新會報錯 - name+params

? this.$router.push({name:“news”,params:{userId:123})

? 查詢參數 和path配對的是query

? this.$router.push({path:"/news’,query:{uersId:123})

? 接收參數 this.$route.query

聲明式導航

? 字符串 <router-link to:“news”>

? 命名路由 <router-link :to:"{name:‘news’,params:{userid:1111}}">

? 還可以to="/path/值" - 需要提前在路由 規則里值 /path/:key

? 查詢參數

? 還可以to="/path?key=value

5. 怎么定義vue-router的動態路由?怎么獲取傳過來的動態參數?

動態路由指的就是path路徑上傳智, 前提需要路由規則了提前配置/path/:key名, 可以寫多個用/隔開, 獲取使用$route.params.key名來提取對應用路徑傳過來的值

6. Vue的路由實現模式：hash模式和history模式（必會）

hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用 window.location.hash 讀取。特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。

history模式：history采用HTML5的新特性；且提供了兩個新方法： pushState()， replaceState()可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更

7. 請說出路由配置項常用的屬性及作用（必會）

? 路由配置參數：

? path : 跳轉路徑
? component : 路徑相對于的組件
? name:命名路由
? children:子路由的配置參數(路由嵌套)
? props:路由解耦
? redirect : 重定向路由

8. 編程式導航使用的方法以及常用的方法（必會）

? 路由跳轉 ： this.router.push()?路由替換:this.router.push() ? 路由替換 : this.router.push()?路由替換:this.router.replace()
? 后退： this.router.back()?前進：this.router.back() ? 前進 ：this.router.back()?前進：this.router.forward()

9. Vue如何去除URL中的#（必會）

? vue-router 默認使用 hash 模式，所以在路由加載的時候，項目中的 URL 會自帶 “#”。如果不想使用 “#”， 可以使用 vue-router 的另一種模式 history：new Router ({ mode : ‘history’, routes: [ ]})

? 需要注意的是，當我們啟用 history 模式的時候，由于我們的項目是一個單頁面應用，所以在路由跳轉的時候，就會出現訪問不到靜態資源而出現 “404” 的情況，這時候就需要服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 “index.html” 頁面。

10. 說一下你在vue中踩過的坑（必會）

? 1、第一個是給對象添加屬性的時候，直接通過給data里面的對象添加屬性然后賦值，新添加的屬性不是響應式的

? 【解決辦法】通過Vue.set(對象，屬性，值)這種方式就可以達到，對象新添加的屬性是響應式的

2、 在created操作dom的時候，是報錯的，獲取不到dom，這個時候實例vue實例沒有掛載

? 【解決辦法】通過：Vue.nextTick(回調函數進行獲取)

11. route和route和route和router的區別？

$route是路由信息對象，包括‘path，hash，query，fullPath，matched，name’等路由信息參數；
$router是路由實例對象，包括了路由的跳轉方法，實例對象等

額外擴展

路由 - 工作原理手寫

目標: 了解hash改變, 如何顯示不同的組件的過程

基本思路:

  1. 用戶點擊了頁面上的a鏈接
  2. 導致了 URL 地址欄中的 Hash 值發生了變化
  3. 前端js監聽了到 Hash 地址的變化
  4. 前端js把當前 Hash 地址對應的組件渲染都瀏覽器中

實現簡單的前端路由:

  1. src/views/創建并在App.vue里導入和注冊組件

    MyHome.vue

    MyMovie.vue

    MyAbout.vue

<script>
import MyHome from '@/views/MyHome.vue'
import MyMovie from '@/views/MyMovie.vue'
import MyAbout from '@/views/MyAbout.vue'
export default {components: {MyHome,MyMovie,MyAbout,}
}
</script>
  1. 通過動態組件, 控制要顯示的組件
<template><div><h1>App組件</h1><component :is="comName"></component></div>
</template><script>
export default {// ...省略其他data () {return {comName: 'MyHome'}}
}
</script>
  1. 聲明三個導航鏈接, 點擊時修改地址欄的 hash 值
<template><div><h1>App組件</h1><a href="#/home">首頁</a>&nbsp;<a href="#/movie">電影</a>&nbsp;<a href="#/about">關于</a>&nbsp;<component :is="comName"></component></div>
</template>
  1. 在 created 中, 監視地址欄 hash 時的變化, 一旦變化, 動態切換展示的組件
created () {window.onhashchange = () => {switch(location.hash) {case '#/home':this.comName = 'MyHome'breakcase '#/movie':this.comName = 'MyMovie'breakcase '#/about':this.comName = 'MyAbout'break}}
},

總結: 改變瀏覽器url的hash值, JS監聽到hash值改變, 把對應的組件顯示到同一個掛載點

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/248525.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/248525.shtml
英文地址，請注明出處：http://en.pswp.cn/news/248525.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

passwd命令

passwd命令

-n 在這幾天你不能更改密碼&#xff01; -x 在n<時間<x在這段時間內你必須修改密碼&#xff01; -w 當距離x日期還有w天的時候開始提醒你改密碼&#xff01; -i 密碼過期i天之后&#xff0c;此密碼停用&#xff0c;你也就無法用此密碼登陸這個用戶了。注意是密碼過期之后…
閱讀更多...
一文帶你吃透Vue生命周期（結合案例通俗易懂）

一文帶你吃透Vue生命周期（結合案例通俗易懂）

文章目錄本篇學習目標1. vue生命周期1.0_人的-生命周期1.1_鉤子函數1.2_初始化階段1.3_掛載階段1.4_更新階段1.5_銷毀階段2. axios2.0_axios基本使用2.1_axios基本使用-獲取數據2.2_axios基本使用-傳參2.3_axios基本使用-發布書籍2.4_axios基本使用-全局配置3. nextTick和nextT…
閱讀更多...
[SCOI2012]滑雪 (最小生成樹 Kruskal)

[SCOI2012]滑雪 (最小生成樹 Kruskal)

題目描述 a180285非常喜歡滑雪。他來到一座雪山&#xff0c;這里分布著M條供滑行的軌道和N個軌道之間的交點&#xff08;同時也是景點&#xff09;&#xff0c;而且每個景點都有一編號i(1≤i≤N)和一高度Hi?。a180285能從景點ii滑到景點j當且僅當存在一條i和j之間的邊&#xf…
閱讀更多...
來學習ansibie（1）

來學習ansibie（1）

# ansible 批量在遠程主機上執行命令 python2.7編寫 ## 安裝 第一步:下載epel源 shellwget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo 第二步:安裝 shellyum install -y ansible ## ansible 命令格式 shellUsage: ansible <host-pattern&g…
閱讀更多...
CQYZOJ P1392 拔河問題

CQYZOJ P1392 拔河問題

題目\(1\) Description 一個學校舉行拔河比賽&#xff0c;所有的人被分成了兩組&#xff0c;每個人必須&#xff08;且只能夠&#xff09;在其中的一組&#xff0c;且兩個組內的所有人體重加起來盡可能地接近. Input 第\(1\)行是一個\(n\)&#xff0c;表示參加拔河比賽的總人數…
閱讀更多...
靈活的Vue組件——原來這么簡單

靈活的Vue組件——原來這么簡單

本篇學習目標 能夠理解vue組件概念和作用能夠掌握封裝組件能力能夠使用組件之間通信能夠完成todo案例 1. vue組件 1.0_為什么用組件 以前做過一個折疊面板 需求: 現在想要多個收起展開的部分 方案1: 復制代碼 代碼重復 冗余不利于維護 案例用less寫的樣式, 所以下載 ya…
閱讀更多...
FOI冬令營 Day 3

FOI冬令營 Day 3

目錄 T1、簽到題&#xff08;sort&#xff09;傳送門 Code T2、送分題&#xff08;queue&#xff09;傳送門 Code T3、簡單題&#xff08;game&#xff09;傳送門 Code 咕咕咕T1、簽到題&#xff08;sort&#xff09; 傳送門 原題&#xff1a;LOJ 2767 Code //2019/2/14 //50…
閱讀更多...
委托事件觀察者模式

委托事件觀察者模式

委托的默認返回類型&#xff1a;void 聲明委托的關鍵字&#xff1a;delegate 多播委托&#xff1a;將多個方法綁定到一個委托變量 在調用方法時 可以執行綁定的方法 委托的描述&#xff1a; 委托是一個類 定義了方法的類型 可以將方法當做另一個方法進行傳遞 委托并不等同于方法…
閱讀更多...
贏在CSDN——名利兼收

贏在CSDN——名利兼收

文章目錄&#x1f30a; 相識CSDN&#x1f30a; 益于CSDN流量將成為你我的亮點我的專欄收益到賬啦學習會員助你拿捏專欄更多曝光自己的機會CSDN問答為你準備的零花錢&#x1f30a; 忠于CSDN&#x1f30a; 相識CSDN 小編自注冊CSDN至今兩年有余&#xff0c;記得初衷也僅僅是為了…
閱讀更多...
124angular1實現無限表單（僅供自己看）

124angular1實現無限表單（僅供自己看）

//將本行的內容對象作為參數&#xff0c;傳給點擊函數&#xff0c;點擊函數向后臺發送請求&#xff0c;把獲取的返回值作為內容對象的一個屬性。 (function (angular) {angular.module(myModule, []).directive(treeModel, [$compile, function ($compile) {return {restrict: …
閱讀更多...
了解 Vue SSR 這一篇足以

了解 Vue SSR 這一篇足以

文章目錄1 - 什么是服務器端渲染&#xff1f;1.1 新建server文件夾1.2 生成一個node項目1.3 安裝express1.4 服務端渲染小案例1.5 運行查看效果1.6 打開瀏覽器1.7 右鍵查看源代碼2 - 什么是客戶端渲染&#xff1f;2.1 新建client文件夾2.2 生成一個vue項目2.3 安裝依賴并啟動2.…
閱讀更多...
3 數組中的重復數字

3 數組中的重復數字

題目描述 在一個長度為 n 的數組里的所有數字都在 0 到 n-1 的范圍內。數組中某些數字是重復的&#xff0c;但不知道有幾個數字是重復的&#xff0c;也不知道每個數字重復幾次。請找出數組中任意一個重復的數字。 Input: {2, 3, 1, 0, 2, 5}Output: 2 思路 給出了長度為n且數組…
閱讀更多...
小型軟件項目開發流程探討

小型軟件項目開發流程探討

一&#xff0e;導言國內很多項目都是小型項目, 參與人員少(兩到五個人), 要快速交付(一兩個月) . 要成功完成這種項目, 除了使用成熟且被團隊成員熟練使用的技術之外, 有一個良好的開發流程, 也是很必要的. 二&#xff0e;小型軟件項目開發流程下圖是我對小型軟件項目開發流程…
閱讀更多...
Vue2的核心原理剖析

Vue2的核心原理剖析

? 用了這么久的Vue2了你真的 知其然&#xff0c;知其所以然么&#xff1f; ?今天博主就為大家帶來一篇對Vue核心功能的部分剖析\textcolor{pink}{今天博主就為大家帶來一篇對Vue核心功能的部分剖析}今天博主就為大家帶來一篇對Vue核心功能的部分剖析 ?后續文章會用更多小案…
閱讀更多...
Scrum之成敗——從自身案例說起，僅供參考

Scrum之成敗——從自身案例說起，僅供參考

從07年中初次接觸Scrum的概念到其中幾年項目中逐漸實踐CI、TDD&#xff0c;到親自掌握項目實踐Scrum近一年&#xff0c;最終我們放棄了Scrum這個框架和所謂的“自組織”。原因為何&#xff1f; 1.成員放棄了Scrum所“賦予”的“權利” 比如領用任務、評估工作量、自組織協作、決…
閱讀更多...
sanic官方文檔解析之下載和Configuration

sanic官方文檔解析之下載和Configuration

1,sanic框架是做什么的? sanic的官方網址:https://sanic.readthedocs.io/en/latest/sanic框架是一個類似于flask框架的在Python3.5以上版本的文本服務器,他能夠快速的編寫,它是通過驚人的開發效率完成開發,希望通過這篇文章得到激勵sanic框架的理念是:簡單,高效 sanic的應用如…
閱讀更多...
首秀 Express 框架

首秀 Express 框架

文章目錄框架特性express的使用初始化項目&#xff1a;下載框架模塊&#xff1a;測試代碼&#xff1a;總結以上代碼&#xff1a;請求處理的中間件概念&#xff1a;中間件——app.use基本用法&#xff1a;next的用法app.use中間件的應用路由的保護網站維護公告自定義404&#xf…
閱讀更多...
云原生技能樹測評

云原生技能樹測評

前言 利用午休后的10多分鐘時間&#xff0c;看了看APP的技能樹板塊&#xff0c;簡單的提出幾個看法&#xff01; 答題過程 可以設置為闖關類型&#xff0c;答對一道后可以進入下一關&#xff0c;或者是一個章節為一關&#xff0c;讓大家一直有一種期待 回答錯誤數量 可以…
閱讀更多...
原型和閉包

原型和閉包

原型和閉包 一切皆對象 一切皆對象&#xff08;類型值除外&#xff09; undefined, number, string, boolean屬于簡單的值類型 函數、數組、對象、new Number(10)都是對象。他們都是引用類型 Null是基本數據類型&#xff0c;不是引用數據類型 基本數據類型的值就是它本身的值&a…
閱讀更多...
python 排序算法

python 排序算法

冒泡排序&#xff1a; 1 #coding:utf-82 3 比較相鄰的元素&#xff0c;每一趟交換后&#xff0c;最后的元素是最大的。4 第一次比較n-1次&#xff0c;第二次比較n-2次。。。第n-1次比較1次5 進行n-1次冒泡次數6 最優時間復雜度O(n),最壞時間復雜度O(n^2)7 8 9 def bubble_sort…
閱讀更多...
最新文章

Copyright @ 2022~2023