vue獲取參數(shù)的幾種方式總結(jié)
路由基礎(chǔ)
1.SPA與路由
1.1 SPA介紹
1.1.1 什么是SPA？
SPA（single-page application），只有一個HTML頁面，通過路由實現(xiàn)頁面內(nèi)的局部切換，公共資源部分只加載一次。
我們熟知的JS框架如react,vue,angular,ember都屬于SPA。
1.1.2 什么是MPA（多頁面應(yīng)用）
平常寫的普通頁面就是MPA，通過a標(biāo)簽實現(xiàn)頁面切換，每次切換頁面都要重新加載公共資源部分。
1.1.3 SPA和MPA的區(qū)別
| 區(qū)別 | SPA | MPA |
|---|---|---|
| 組成 | 一個外殼頁面和多個頁面片段組成 | 多個完整的頁面組成 |
| 公用資源（js，css，img） | 公用，只加載一次 | 每個頁面都需要加載 |
| 刷新方式 | 局部刷新 | 整體刷新 |
| URL模式 | 哈希模式（a.com/#/page1）/歷史模式(a.com/page1) | 歷史模式 |
| 用戶體驗 | 用戶體驗好，頁面切換快 | 用戶體驗不好，頁面切換慢 |
| 轉(zhuǎn)場動畫 | 容易實現(xiàn) | 無法實現(xiàn) |
| 數(shù)據(jù)傳遞 | 容易 | 依賴URL或本地存儲 |
| SEO | 實現(xiàn)比較困難 | 簡單 |
| 開發(fā)成本 | 難度高，需要借助專業(yè)的框架 | 難度低，但是重復(fù)代碼比較多 |
| 維護(hù)成本 | 相對比較低 | 相對比較高 |
1.1.4 SPA的優(yōu)缺點
優(yōu)點：
- 1，用戶體驗好，快，內(nèi)容的改變不需要重新加載整個頁面，基于這一點spa對服務(wù)器壓力較小
- 2，前后端分離
- 3，頁面效果會比較炫酷（比如切換頁面內(nèi)容時的專場動畫）
缺點：
- 1，不利于seo（搜索引擎優(yōu)化（Search Engine Optimization,SEO）是一種通過了解搜索引擎的運行規(guī)則來調(diào)整網(wǎng)站，以提高目標(biāo)網(wǎng)站在有關(guān)搜索引擎內(nèi)排名的方式）；
- 2，導(dǎo)航不可用，如果一定要導(dǎo)航需要自行實現(xiàn)前進(jìn)、后退。（由于是單頁面不能用瀏覽器的前進(jìn)后退功能，所以需要自己建立堆棧管理）
- 3，不支持低版本的瀏覽器，最低只支持到IE9
- 4，初次加載時耗時多
- 5，頁面復(fù)雜度提高很多
1.2 路由介紹
簡單舉例說明，假如我們有一臺提供 Web 服務(wù)的服務(wù)器的網(wǎng)絡(luò)地址是：10.0.0.1，而該 Web 服務(wù)又提供了三個可供用戶訪問的頁面，其頁面 URI 分別是：
http://10.0.0.1/ http://10.0.0.1/about http://10.0.0.1/concat
那么其路徑就分別是 /，/about，/concat。
當(dāng)用戶使用 http://10.0.0.1/about 來訪問該頁面時，Web 服務(wù)會接收到這個請求，然后會解析 URL 中的路徑 /about，在 Web 服務(wù)的程序中，該路徑對應(yīng)著相應(yīng)的處理邏輯，程序會把請求交給路徑所對應(yīng)的處理邏輯，這樣就完成了一次「路由分發(fā)」，這個分發(fā)就是通過「路由」來完成的。
簡單的說，路由是根據(jù)不同的 url 地址展示不同的內(nèi)容或頁面。
1.3前端路由原理
路由的概念在軟件工程中出現(xiàn)，最早是在后端路由中實現(xiàn)的。服務(wù)器直接生產(chǎn)渲染好對應(yīng)的HTML頁面, 返回給客戶端進(jìn)行展示。
前端路由是如何做到URL和內(nèi)容進(jìn)行映射呢？監(jiān)聽URL的改變。
1.3.1 URL的hash
URL的hash也就是錨點(#), 本質(zhì)上是改變window.location的href屬性；我們可以通過直接賦值location.hash來改變href, 但是頁面不發(fā)生刷新；另外每次 hash 值的變化，還會觸發(fā)hashchange 這個事件，通過這個事件我們就可以知道 hash 值發(fā)生了哪些變化。然后我們便可以監(jiān)聽hashchange來實現(xiàn)更新頁面部分內(nèi)容的操作。
<div id="app">
<a href="#/home" rel="external nofollow" >home</a>
<a href="#/about" rel="external nofollow" >about</a>
<div id="router-view"></div>
</div>
<script>
const routerView = document.querySelector('#router-view');
// url的hash
// URL的hash也就是錨點，本質(zhì)上就是改變window.location 的 href 屬性
// 我們可以通過直接賦值location.hash 來改變 href 但是頁面不會刷新
window.addEventListener('hashchange',()=>{
console.log(location.hash);
if(location.hash==="#/home"){
routerView.innerHTML = "home";
}else if(location.hash==="#/about"){
routerView.innerHTML = "about";
}
})
</script>
hash的優(yōu)勢就是兼容性更好，在老版IE中都可以運行，但是缺陷是有一個#，顯得不像一個真實的路徑。
1.3.2 HTML5的History
14年后，因為HTML5標(biāo)準(zhǔn)發(fā)布。多了兩個 API，pushState 和 replaceState，通過這兩個 API 可以改變 url 地址且不會發(fā)送請求。
通過這些就能用另一種方式來實現(xiàn)前端路由了，但原理都是跟 hash 實現(xiàn)相同的。用了 HTML5 的實現(xiàn)，單頁路由的 url 就不會多出一個#，變得更加美觀。但因為沒有 # 號，所以當(dāng)用戶刷新頁面之類的操作時，瀏覽器還是會給服務(wù)器發(fā)送請求。
為了避免出現(xiàn)這種情況，所以這個實現(xiàn)需要服務(wù)器的支持，需要把所有路由都重定向到根頁面；
<div class="nav">
<a onclick="linkTo(1)">link1</a>
<a onclick="linkTo(2)">link2</a>
</div>
<div id="router-view">
</div>
<script>
var view = document.getElementById('router-view');
function linkTo(link){
switch(link) {
case 1: {
window.history.pushState({a:1}, 'mylink1', '/link1');
view.innerHTML = 'link1 content';
break;
}
case 2: {
window.history.pushState({a:1}, 'mylink2', '/link2');
view.innerHTML = 'link2 conetnt';
break;
}
default:
return;
}
return false;
}
</script>
2.vue-router基礎(chǔ)用法
通過vue的路由可實現(xiàn)多視圖的單頁面Web應(yīng)用。VueRouter文檔
我們之前使用過is特性來實現(xiàn)動態(tài)組件，vue-router的實現(xiàn)原理與之類似。vue-router展示不同的頁面事實上就是動態(tài)加載不同的組件。
當(dāng)我們的地址欄發(fā)生了變化，vue-router就會監(jiān)聽到。根據(jù)它里面配置的匹配規(guī)則，展示不同的組件。
2.1 下載VueRouter
2.1.1 直接下載
VueRouter下載地址 : https://unpkg.com/vue-router/dist/vue-router.js
2.1.2 使用CDN地址
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
2.1.3 腳手架
在使用腳手架搭建項目時，選擇 Vue-router，項目創(chuàng)建好之后默認(rèn)安裝vue-router。如果創(chuàng)建項目時，沒有選擇，也可以使用模塊化開發(fā)的方式。執(zhí)行如下的命令來安裝Vue Router。
npm i vue-router
2.2 一般使用過程
2.2.1 使用router-link組件來定義導(dǎo)航
在app.vue的template中修改成如下代碼
<template>
<div>
<!-- router-link相應(yīng)于a標(biāo)簽，to相當(dāng)于href,指要單擊跳轉(zhuǎn)到顯示那個組件的內(nèi)容 ，最終瀏覽器還是會把router-link解析為a標(biāo)簽-->
<router-link to="/about">關(guān)于我們</router-link>
<router-link to="/news">新聞</router-link>
</div>
</template>
2.2.2 指定組件的渲染位置
通過router-view組件指定組件的渲染位置。
<template>
<!-- ... -->
<div class="container">
<!-- router-view指定顯示路由導(dǎo)航內(nèi)容的位置，也就是單擊【關(guān)于我們】或【新聞】連接的內(nèi)容都在router-view組件指定位置顯示 -->
<router-view></router-view>
</div>
</template>
當(dāng)單擊鏈接router-link的時候，會在router-view所在的位置渲染組件的模板內(nèi)容?？梢园裷outer-view理解為占位符。
再準(zhǔn)備好樣式
<style>
.container {
background-color:blanchedalmond;
margin-top: 10px;
width: 600px;
height: 300px;
}
</style>
2.2.3 定義路由組件
也就是每個鏈接顯示的內(nèi)容，這里只是演示前端路由的基本用法，所以組件定義很簡單。新建兩個文件 About.vue和News.vue
<template> <h3>關(guān)于我們</h3> </template>
<template> <h3>最熱新聞</h3> </template>
2.2.4 定義路由，創(chuàng)建路由實例
src目錄下新建一個router文件夾，如果創(chuàng)建項目時，已經(jīng)選擇了Vue-router則會自動創(chuàng)建。創(chuàng)建index.js文件，代碼如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Films from '@/components/About'
import Cinemas from '@/components/News'
// 注冊路由插件, 兩個全局 router-view router-link
Vue.use(VueRouter)
// 配置表,有多條路由時，通常定義為一個常量數(shù)組，里面每個對象就是一個路由
const routes = [
// 定義路由格式：path指定路由的url，component指定當(dāng)單擊path指定的url時顯示哪個組件內(nèi)容。
{ path: '/about', component: About },
{ path: '/news', component: News }
]
//能new VueRouter就是因為引入了vue-router.js。
export default new VueRouter({
// routes:routes//左邊routes為要設(shè)置的路由選項routes，右邊routes為選項值，名字當(dāng)然可以不同，但是一般設(shè)置為相同。第2步不單獨定義，直接寫在routes里也可以
routes,
mode:'history',
linkActiveClass:'active'
});
2.2.5 掛載路由實例對象
在main的js中，掛在路由實例對象.
import router from './router'
//創(chuàng)建vue根實例，并將上面的路由實例掛載到vue實例上，也稱為注入路由，就是告訴vue實例有這么一個路由了。
//怎么告訴呢？通過router選項
var vm = new Vue({
el: "#app",
// router:router//同樣:左右兩邊名稱相同，可以簡寫
router//注入路由
})
2.3 修改路由模式
上面的案例中，當(dāng)我們切換路由時發(fā)現(xiàn)地址欄后面會自動再加一個“#”。為什么是這種顯示模式呢？因為在使用Vue Router創(chuàng)建路由實例時，默認(rèn)采用的是hash路由配置模式。這種模式的優(yōu)點是各種瀏覽器的兼容性比較好。
但是hash模式下url需要帶“#”符號，不僅看起來不舒服，而且有些場景下是會破壞路由中的"#"（微信分享頁面就會把"#"后邊的內(nèi)容處理掉），所以我們可以將路由實例修改為history路由模式。只需要在創(chuàng)建路由實例時，設(shè)置mode選項為history即可。
const router = new VueRouter({
routes,
mode:'history'
})
這種history路由模式的缺點是URL兼容性不好，并且懼怕刷新。
2.4 為當(dāng)前導(dǎo)航添加樣式
觀察生成的HTML代碼，會發(fā)現(xiàn)在當(dāng)前導(dǎo)航中多了兩個class類名。
<a class="router-link-exact-active rotuer-link-active">關(guān)于我們</a>
但是此類名并沒有設(shè)置樣式，需要自己手動設(shè)置具體樣式。
.rotuer-link-active{
font-size:20px;
color:red;
text-decoration: none;
}
需要注意的是，樣式名取最后一個即可，這兩者的區(qū)別在后面學(xué)習(xí)嵌套路由時再說明。
另外，如果覺得系統(tǒng)默認(rèn)樣式名太長，不好記憶可以進(jìn)行修改。
在創(chuàng)建路由實例時，可通過linkActiveClass選項，設(shè)置樣式名。
const router = new VueRouter({
routes,
mode:'history',
linkActiveClass:'active'
})
2.5 路由重定向
還有一個問題，不論哪種路由模式，剛打開頁面既沒有顯示【關(guān)于我們】的內(nèi)容，也沒顯示【新聞】鏈接的內(nèi)容。我們可以在配置路由時，在增加一個路由，作用是：找不到路由時，重定向到about。 可以理解為備胎，最后實在沒招了，就匹配備胎了。
const routes = [
{ path: '/about', component: About },
{ path: '/news', component: News },
{path:'*',redirect:'/about'}//*表示找不到路由時，重定向到about
]
2.6 router-link標(biāo)簽中的tag屬性
【router-link】默認(rèn)會轉(zhuǎn)為【a標(biāo)簽】，實際上可以添加tag屬性來轉(zhuǎn)為指定的標(biāo)簽，比如轉(zhuǎn)為【buttton標(biāo)簽】或【li標(biāo)簽】等。
<router-link to="/account/login" tag="button">登錄</router-link>
不過vue-router4.x 之后廢棄了 tag 而使用（v-solt）插槽來實現(xiàn)
<router-link custom to="/account/login" custom v-slot="{ isActive,navigate-}">
<buttton @click="navigate">我是路由自定義標(biāo)簽</buttton>
</router-link>
<!--
custom 屬性的意思，就是允許自定義標(biāo)簽，如果不寫就會定義成 a 標(biāo)簽
navigate 導(dǎo)航的觸發(fā)函數(shù)
isActive 是否匹配的狀態(tài)
-->
3.前端路由嵌套
如果全是用一級路由時，路由管理就變得很臃腫，有點亂，路由有父子關(guān)系的話，嵌套路由會更好。嵌套路由也就是路由中的路由的意思，組件中可以有自己的路由導(dǎo)航和路由容器（router-link、router-view），通過配置children可實現(xiàn)多層嵌套，在vue組件中使用<router-view>就可以了。
舉例：我們上面的例子中，添加一個books路由，單擊“圖書”鏈接，以列表的形式顯示所有圖書的書名，進(jìn)一步單擊單個書名鏈接，在Books視圖中顯示圖書的詳細(xì)信息。
在asssets目錄下新建一個books.js文件，里面是圖書數(shù)據(jù)
export default [
{id: 1, title: '三體', desc: '三個天體在互相引力的作用下互相圍繞運行，其運行軌跡將產(chǎn)生不可預(yù)測的混沌。'},
{id: 2, title: '蛤蟆先生去看心理醫(yī)生', desc: '蛤蟆先生一向愛笑愛鬧，如今卻一反常態(tài)地郁郁寡歡。'},
{id: 3, title: '活著', desc: '人是為了活著本身而活著的，而不是為了活著之外的任何事物而活著。'}
]
這里只是為了演示需要，真實場景中，圖書數(shù)據(jù)應(yīng)該是通過ajax請求從服務(wù)器端加載而來。
3.1.1. 在父組件中添加導(dǎo)航
修改Books.vue,以列表方式顯示圖書數(shù)據(jù)，添加導(dǎo)航鏈接，并使用【router-view】來指定book組件渲染的位置
<template>
<div>
<h3>圖書列表</h3>
<ul>
<li v-for="book in books" :key="book.id">
<router-link to="/books/book/">{{book.title}}</router-link>
</li>
</ul>
<!--Book組件在這里渲染-->
<router-view></router-view>
</div>
</template>
<script>
import Books from '@/assets/books'
export default {
data(){
return {books:Books}
}
}
</script>
3.1.2.添加子路由顯示的組件
新建Book.vue,代碼如下。
<template>
<div>
圖書詳情頁面
</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
3.1.3.配置父路由的children屬性
在router目錄下的index.js中修改代碼如下：
import Book from '@/components/Book'
//...
const routes = [
//...
{
path: '/books',
component: Books,
children: [
{path: 'book', component: Book}
]
},
]
（1）要在嵌套的出口（即Books組件中的router-view）中渲染組件，需要在routes選項的配置中使用children選項。children選項只是路由配置對象的另一個數(shù)組，如同routes本身一樣，因為，可以根據(jù)需要繼續(xù)嵌套配置。
（2）以‘/’開頭的嵌套路徑被視為根路徑。上面的子路由導(dǎo)航中，如果path是“/book”則會出錯。
完成以上步驟后，我們點擊圖書就可以看到進(jìn)入圖書詳情頁面了，但是我們還需要在該頁面中看到點擊圖書的詳情信息，這就意味這我們需要將父組件Books.vue中的被點擊圖書的ID傳遞給Book.vue組件。
4.路由之間的傳參
在進(jìn)行表單提交、組件跳轉(zhuǎn)等操作時需要使用到上一個表單、組件中的一些數(shù)據(jù)。此時就需要將參數(shù)在路由間進(jìn)行傳遞。
4.1.query傳參
將需要的參數(shù)以 【key = value】的方式放在URL地址中。
book?id=1
這里的參數(shù)值“id”可以通過當(dāng)前組件的表單輸入來獲取。
那么進(jìn)入book組件后如何獲取傳入的參數(shù)呢？
當(dāng)將實例化的VueRouter對象掛載到Vue實例后，Vue Router在Vue實例上創(chuàng)建了兩個屬性對象。即 r o u t e r ( r o u t e r 實 例 ) 和 router(router實例)和 router(router實例)和route（當(dāng)前頁面的路由信息）。通過【this.$route.query】可以獲取query查詢參數(shù)。
<!-- book.vue -->
<template>
<h4>這里是Book頁面內(nèi)容,獲取參數(shù):{{this.$route.query}},圖書ID ：{{this.$route.query.id}}</h4>
</template>
<script>
export default {
}
</script>
4.2.params方式傳參
我們也可以使用動態(tài)參數(shù)的方式傳遞參數(shù)，比如 【book/1】。那【1】分別代表什么？這個需要在路由中指明。
<router-link to="/books/book/1">注冊</router-link>
與query查詢參數(shù)不同的是，在定義路由信息時，需要以占位符【：參數(shù)名】的方式將需要傳遞的參數(shù)指定到路由地址中，否則系統(tǒng)不能識別傳遞的參數(shù)。
在路由中指定參數(shù)的含義，代碼如下：
children: [{ //books下的子路由
path: 'book/:id',
component: Book
}]
進(jìn)入Book.vue組件時如何獲取傳遞過來的參數(shù)？這與獲取query參數(shù)的方式相同，可以通過【 r o u t e 】 獲 取 當(dāng) 前 路 由 信 息 ， 通 過 【 route】獲取當(dāng)前路由信息，通過【 route】獲取當(dāng)前路由信息，通過【route.params.參數(shù)名】的方式獲取動態(tài)參數(shù)。參數(shù)名也就是在路由中設(shè)置的參數(shù)名（/：后面的）
<!-- book.vue -->
<template>
<h4>這里是Book頁面內(nèi)容,獲取參數(shù):{{this.$route.params}},圖書ID ：{{this.$route.params.id}}</h4>
</template>
<script>
export default {
}
</script>
4.3 獲取當(dāng)前路由路徑
路由對象還有其他屬性，如【$route.path】，可以獲取當(dāng)前路由的路徑。
<!-- book.vue -->
<template>
<h4>這里是Book頁面內(nèi)容,獲取參數(shù):{{this.$route.params}},圖書ID ：{{this.$route.params.id}},路由路徑{{$route.path}}</h4>
</template>
<script>
export default {
}
</script>
4.4 實現(xiàn)圖書詳情
接下來實現(xiàn)在Book.vue組件中顯示點擊書籍的詳細(xì)信息。
修改Books.vue代碼如下：
<!-- 注意 to屬性使用了數(shù)據(jù)綁定，才可以使用動態(tài)的book.id -->
<router-link :to="'/books/book/'+book.id">{{book.title}}</router-link>
修改book.vue代碼如下：
<template>
<div>
<p>圖書ID：{{ book.id }}</p>
<p>書名：{{ book.title }}</p>
<p>說明：{{ book.desc }}</p>
</div>
</template>
<script>
import Books from '@/assets/books'
export default {
data(){
return {
book: {}
}
},
//寫在created中是為了模擬ajax請求。
created(){
this.book = Books.find((item) => item.id == this.$route.params.id);
}
}
</script>
實際場景中，當(dāng)單擊某本圖書鏈接時，應(yīng)該向服務(wù)器端發(fā)起Ajax請求來獲取圖書詳細(xì)數(shù)據(jù)，于是我們想到在Book組件中通過生命周期鉤子函數(shù)來實現(xiàn)，然而，這行不通。這是因為當(dāng)兩個路由都渲染同一個組件時，例如，從book/1導(dǎo)航到book/2時，vue會復(fù)用先前的Book實例，比起銷毀舊實例再創(chuàng)建新實例，復(fù)用會更加高效。但是這就意味著組件的生命周期鉤子不會再被調(diào)用，所以也就無法在生命周期鉤子中根據(jù)路由參數(shù)的變化來實現(xiàn)更新數(shù)據(jù)。
要對同一組件中的路由參數(shù)更改作出響應(yīng)，只需監(jiān)聽$route對象。當(dāng)路由參數(shù)變化時，更新圖書詳細(xì)數(shù)據(jù)。
Book.vue代碼修改如下：
created(){
this.book = Books.find((item) => item.id == this.$route.params.id);
},
watch: {
'$route' (to) {
this.book = Books.find((item) => item.id == to.params.id);
}
}
(1)只有路由參數(shù)發(fā)生變化時， route 對象的監(jiān)聽器才會被調(diào)用 ，這意味著第一次渲染Book組件時 ，通過 route對象的監(jiān)聽器才會被調(diào)用，這意味著第一次渲染Book組件時，通過 route對象的監(jiān)聽器才會被調(diào)用，這意味著第一次渲染Book組件時，通過route對象的監(jiān)聽器是得不到數(shù)據(jù)的，因此利用created鉤子來獲取第一次渲染時的數(shù)據(jù)，當(dāng)然，也可以利用immediate選項，將其值設(shè)為true，讓監(jiān)聽器在監(jiān)聽開始后立即執(zhí)行，這樣就不需要created鉤子了。
watch: {
'$route': {
handler: function(to) {
this.book = Books.find((item) => item.id == to.params.id);
},
immediate: true
}
}
(2)$route對象的監(jiān)聽器函數(shù)中的to參數(shù)表示即將進(jìn)入的目標(biāo)路由對象，該函數(shù)還可以帶一個from參數(shù)，表示當(dāng)前導(dǎo)航正要離開的路有對象。
除了監(jiān)聽$route對象，還可以用到后面要學(xué)習(xí)的導(dǎo)航守衛(wèi)。這個以后再說。
5.編程式導(dǎo)航
Vue-router路由分為兩種：
- 聲明式路由編程式路由
- 聲明式導(dǎo)航是寫在template標(biāo)簽里，通過標(biāo)簽來觸發(fā)
編程式導(dǎo)航寫在js里，通過this.$router.push(xxx)來觸發(fā)路徑
前面例子中通過在頁面上設(shè)置【router-link】標(biāo)簽進(jìn)行路由地址間的跳轉(zhuǎn)，就等同于執(zhí)行push方法。
5.1 $router.push添加 / 跳轉(zhuǎn)路由
push方法會將一條心的路由記錄添加到瀏覽器的history棧中，通過history的自身特性，驅(qū)使瀏覽器進(jìn)行頁面的跳轉(zhuǎn)。同時，因為在history會話歷史中會一直保留這個路由信息，所以當(dāng)后退時還是可以返回到當(dāng)前的頁面。
在push方法中，參數(shù)可以使一個字符串路徑，或者是一個描述地址的對象。
this.$router.push('/account/register')
this.$router.push({path:'/account/register'})
如果帶參數(shù)的話，對象方式可以通過query屬性來指定參數(shù)。
this.$router.push({
//想跳到哪里就設(shè)置相應(yīng)的路由，并傳遞參數(shù)信息。比如跳到注冊頁面/account/register也行
path:'/account/login',query:{name:this.name,pwd:this.pwd}
})
需求：在登錄頁面中提供用戶名和密碼輸入框以及【提交】按鈕，點擊【提交】按鈕在注冊頁面中顯示出用戶名和密碼信息。
1.添加tmplogin模板
<template id="tmplogin">
<form action="">
<div>
<h4>歡迎來到登錄頁面，請輸入登錄信息</h4>
用戶名：<input type="text" name="name" v-model="name" /><br>
密碼：<input type="password" name="pwd" v-model="pwd" /><br>
<input type="submit" value="提交" @click="submit">
</div>
</form>
</template>
2.定義組件對象
const login = {
template: '#tmplogin',
data: {
return: {
name: '',
pwd: ''
}
},
methods: {
submit() {
this.$router.push({
//想跳到哪里就設(shè)置相應(yīng)的路由，并傳遞參數(shù)信息。比如跳到注冊頁面/account/register也行
path:'/account/register',query:{name:this.name,pwd:this.pwd}
})
}
},
}
const register = {
template: '<h4>這里是注冊頁面內(nèi)容,獲取傳遞的參數(shù):{{$route.params}},用戶名：{{$route.params.name}},密碼:{{$route.params.pwd}},路由路徑{{$route.path}}</h4>'
}
3.在路由中進(jìn)行配置
children: [{ //account下的子路由
path: 'login',
component: login
}]
5.2 $router.replace替換路由
replace方法同樣可以實現(xiàn)路由跳轉(zhuǎn)的目的。不過，從名字上也可以看出，與使用push方法跳轉(zhuǎn)不同的是，當(dāng)使用replace方法時，并不會往history棧中新增一條新的記錄，而是會替換當(dāng)前的記錄，因此無法通過后退按鈕返回被替換前的頁面。
需求：在賬戶頁面下添加一個【替換路由】按鈕，點擊后跳轉(zhuǎn)到新聞頁面。
1.tempaccount模板添加button按鈕。
<button @click="replace">替換路由</button>
2.在Account組件下，綁定對應(yīng)方法。
var Account = {
template: '#tmpaccount', //這里模板內(nèi)容變復(fù)雜了，所以單獨定義
methods:{
replace(){
this.$router.replace({
path:'/news'
})
}
}
}
從【關(guān)于我們】到【賬戶】，點擊按鈕跳轉(zhuǎn)，進(jìn)入【新聞】，此時點擊瀏覽器的后退，發(fā)現(xiàn)并不會回到【賬戶】，而是回到【關(guān)于我們】。
5.3 $router.go()跳轉(zhuǎn)
當(dāng)使用go方法時，可以在history記錄中向前或向后跳轉(zhuǎn)。也就是說，通過go方法可以在已經(jīng)存儲的history路由歷史中前進(jìn)后退。
//在歷史記錄中前進(jìn)一步，等同于 history.forward（） this.$router.go(1); //后退一步，等同于history.back（） this.$router.go(-1); //前進(jìn)兩步記錄 this.$router.go(2);
5.4 router 與 router與 router與route的區(qū)別
1.$router對象是全局路由的實例，是VueRouter構(gòu)造方法的實例。是路由操作對象，可以添加或跳轉(zhuǎn)路由，替換路由等。
2.$route對象表示當(dāng)前的路由信息，包含了當(dāng)前 URL 解析得到的信息。包含當(dāng)前的路徑，參數(shù)，query對象等。
6.命名路由和命名試圖
6.1 命名路由
在某些時候，生成的路由URL地址可能會很長，在使用中可能會顯得有些不便。這個時候通過一個名稱來標(biāo)識路由會更方便一些。
const routes = [
{ path: '/about',name:'aa', component: About }
]
使用命名路由之后，在使用router-link的to屬性跳轉(zhuǎn)路由的時候傳一個對象，跳轉(zhuǎn)到指定的路由地址上。
<router-link :to="{name:'aa'}">關(guān)于我們</router-link>6.2 命名視圖
當(dāng)打開一個頁面時，整個頁面可能是由多個Vue組件構(gòu)成的。例如，一般后端管理首頁可能是由sidebar（側(cè)導(dǎo)航），header（頂部導(dǎo)航）和main（主內(nèi)容）這三個Vue組件構(gòu)成的。此時，通過Vue Router構(gòu)建路由信息時，如果一個URL只能對應(yīng)一個Vue組件，整個頁面將無法正確顯示。
通過router-view標(biāo)簽，就可以指定組件渲染顯示到什么位置。因此，當(dāng)需要在一個頁面上顯示多個組件的時候，就需要在頁面中添加多個router-view標(biāo)簽。
那么，是不是可以通過一個路由對應(yīng)多個組件，然后按需渲染到不同的【router-view】標(biāo)簽上呢？默認(rèn)情況下不能，當(dāng)我們將一個路由對象對應(yīng)到多個組件時，不管有多少個【router-view】標(biāo)簽，程序都會將第一個組件渲染到所有的【router-view】標(biāo)簽上。
那怎么辦呢？需要實現(xiàn)的是一個路由信息可以通過設(shè)計者的需求去渲染到頁面中指定的router-view標(biāo)簽，這可以通過Vue Router命名視圖的方式來實現(xiàn)。
命名視圖與命名路由的實現(xiàn)方式相似。命名視圖通過在【router-view】標(biāo)簽上設(shè)定name屬性，然后再構(gòu)建路由與組件的對應(yīng)關(guān)系時，以一種【name：component】的形式構(gòu)造出一個組件對象，從而指明在哪個【router-view】標(biāo)簽上加載什么組件。
1.三個組件的樣式布局
.container{
height: 500px;
}
.top {
background-color:beige;
width: 100%;
height: 80px;
}
.left{
float: left;
width: 20%;
height: 100%;
background-color: burlywood;
}
.right{
float: left;
width: 80%;
height: 100%;
background-color: aquamarine;
}
2.html代碼部分
const header = {
template: '<div class="header"> header </div>'
}
const sidebar = {
template: '<div class="sidebar">sidebar</div>'
}
const main = {
template: '<div class="main"> main </div>'
}
3.定義路由跳轉(zhuǎn)的組件模板
const header = {
template: '<div class="header"> header </div>'
}
const sidebar = {
template: '<div class="sidebar">sidebar</div>'
}
const main = {
template: '<div class="main"> main </div>'
}
4.定義路由信息
const routes = [{
path: '/', //一個路由對應(yīng)多個組件
components: {
default: header,//指定什么router-view顯示對應(yīng)的組件，即指明是在哪個 router-view 標(biāo)簽上加載什么組件。
sidebar: sidebar,//格式name:component，name為router-view的name
main: main
}
}]
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<style>
.container{
height: 500px;
}
.top {
background-color:beige;
width: 100%;
height: 80px;
}
.left{
float: left;
width: 20%;
height: 100%;
background-color: burlywood;
}
.right{
float: left;
width: 80%;
height: 100%;
background-color: aquamarine;
}
</style>
<body>
<div id="app">
<div class="top">
<!-- 在 router-view 中，默認(rèn)的 name 屬性值為 default -->
<router-view></router-view>
</div>
<div class="container">
<div class="left">
<router-view name="sidebar"></router-view>
</div>
<div class="right">
<router-view name="main"></router-view>
</div>
</div>
</div>
<template id="sidebar">
<div class="sidebar">
sidebar
</div>
</template>
<script>
// 1、定義路由跳轉(zhuǎn)的組件模板
const header = {
template: '<div class="header"> header </div>'
}
const sidebar = {
template: '#sidebar'
}
const main = {
template: '<div class="main"> main </div>'
}
// 2、定義路由信息
const routes = [{
path: '/', //一個路由對應(yīng)多個組件
components: {
default: header,//指定什么router-view顯示對應(yīng)的組件，即指明是在哪個 router-view 標(biāo)簽上加載什么組件。
sidebar: sidebar,//格式name:component，name為router-view的name
main: main
}
}]
const router = new VueRouter({
routes
})
// 3、掛載到當(dāng)前 Vue 實例上
const vm = new Vue({
el: '#app',
data: {},
methods: {},
router: router
});
</script>
</body>
</html>
7.組件與路由間的解耦
在前面所講路由傳遞參數(shù)的辦法中，不管是query傳參還是param傳參，最終都是通過this.$route屬性獲取參數(shù)信息，如$route.query.name或$route.params.name
這意味著組件和路由耦合到了一塊，所有需要獲取參數(shù)值的地方都需要加載VueRouter。那么如何實現(xiàn)組件與路由的解耦呢？
在之前學(xué)習(xí)組件相關(guān)知識時，我們知道可以通過組件的props選項來實現(xiàn)子組件接受父組件傳遞的值。在Vue Router中，可以通過使用組件的props選項來進(jìn)行組件與路由之間的解耦。
7.1 設(shè)置props：true情況
1.在定義路由規(guī)則時，指定props的屬性為true。
```bash
//定義路由 ? ? ?
const router = new VueRouter({
? ? routes: [{ ? //定義路由?
? ? ? ? path: '/myRouter/:id', //路由規(guī)則通過占位符指明傳遞的參數(shù)為id，同時id要為上面組件props選項中有的值
? ? ? ? component: mycomp,
? ? ? ? props: true //此處props要設(shè)置為true，即可以實現(xiàn)組件與Vue Router之間的解耦
? ? }]
})2.在定義組件時，指定props接受的參數(shù)
//定義組件
const mycomp = {
props: ['id'],
//此處沒有通過$route.params.id方式獲取參數(shù)id，也就不需要router實例
template: '<h3>組件獲取到了路由傳遞的參數(shù)：{{id}}，但此處并沒有通過$route去獲取。 </h3>' /
}
完整核心代碼如下：
<style>
.container {
background-color:blanchedalmond;
margin-top: 10px;
width: 600px;
height: 300px;
}
</style>
<body>
<div id="app">
<button type="button" @click="goMethod">路由與組件解綁示例1</button>
<div class="container">
<router-view></router-view>
</div>
</div>
<script>
//定義組件
const mycomp = {
props: ['id'],
template: '<h3>組件獲取到了路由傳遞的參數(shù)：{{id}}，但此處并沒有通過$route去獲取。 </h3>' //此處沒有通過$route.params.id方式獲取參數(shù)id，也就不需要router實例
}
//定義路由
const router = new VueRouter({
routes: [{ //定義路由
path: '/myRouter/:id', //路由規(guī)則通過占位符指明傳遞的參數(shù)為id，同時id要為上面組件props選項中有的值
component: mycomp,
props: true //此處props要設(shè)置為true，即可以實現(xiàn)組件與Vue Router之間的解耦
}]
})
const vm = new Vue({
el: '#app',
data: {},
methods: {
goMethod() { //該方法實現(xiàn)路由跳轉(zhuǎn)，跳轉(zhuǎn)到myRouter，并傳入?yún)?shù)123
this.$router.push({
path: '/myRouter/123' //param方式傳參
})
}
},
router
})
</script>
</body>
需要注意的是，該方法要求路由傳遞參數(shù)方式一定為param方式。
7.2 設(shè)置props為對象情況
在將路由規(guī)則的props屬性定義為對象后，不管路由參數(shù)中傳遞的是什么值，最終獲取的都是對象中的值。同時，需要注意的是，props中的屬性值必須是靜態(tài)的，固定的。
上述案例修改下定義路由部分的代碼
//定義路由
const router = new VueRouter({
routes: [{ //定義路由
path: '/myRouter/:id', //路由規(guī)則通過占位符指明傳遞的參數(shù)為id，同時id要為上面組件props選項中有的值
component: mycomp,
props:{
id:'123' //組件獲取到的是這里的值
}
}]
})
與上面案例相比，html與js沒有變化，只需要修改下js部分
//定義組件
const mycomp = {
props: ['id'],
template: '<h3>組件獲取到了路由傳遞的參數(shù)：{{id}}，但此處并沒有通過$route去獲取。 </h3>'
}
//定義路由
const router = new VueRouter({
routes: [{ //定義路由
path: '/myRouter/:id', //路由規(guī)則通過占位符指明傳遞的參數(shù)為id，同時id要為上面組件props選項中有的值
component: mycomp,
props:{
id:'123' //組件獲取到的是這里的值
}
}]
})
const vm = new Vue({
el: '#app',
data: {},
methods: {
goMethod() { //該方法實現(xiàn)路由跳轉(zhuǎn)，跳轉(zhuǎn)到myRouter
this.$router.push({
path: '/myRouter/123456'//param方式傳參,隨便寫參數(shù)，但是必須有
})
}
},
router
})
7.3 設(shè)置props為函數(shù)情況
在對象模式中，只能接受靜態(tài)的props屬性值。而使用函數(shù)模式之后，就可以對靜態(tài)值做數(shù)據(jù)的進(jìn)一步交工，或者是與路由傳遞參數(shù)的值進(jìn)行結(jié)合。
js部分代碼修改如下
//定義組件
const mycomp = {
props: ['id', 'name'],
template: '<h3>組件獲取到了路由傳遞的參數(shù)：{{id}}——{{name}}，但此處并沒有通過$route去獲取。 </h3>'
}
//定義路由
const router = new VueRouter({
routes: [{ //定義路由
path: '/myRouter',
component: mycomp,
props: route => ({
id: route.query.id,//獲取到通過路由傳遞的參數(shù)，這個就可以是動態(tài)的
name: 'zhangsan'//這個是靜態(tài)的
})
}]
})
const vm = new Vue({
el: '#app',
data: {},
methods: {
goMethod() { //該方法實現(xiàn)路由跳轉(zhuǎn)，跳轉(zhuǎn)到myRouter
this.$router.push({
path: '/myRouter?id=123'//query方式傳參
})
}
},
router
})
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中用props給data賦初始值遇到的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解
這篇文章主要介紹了vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue中控制mock在開發(fā)環(huán)境使用,在生產(chǎn)環(huán)境禁用方式
這篇文章主要介紹了vue中控制mock在開發(fā)環(huán)境使用,在生產(chǎn)環(huán)境禁用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue內(nèi)置組件keep-alive事件動態(tài)緩存實例
這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動態(tài)緩存實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue3下eslint配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要給大家介紹了關(guān)于vue瀏覽器返回監(jiān)聽的具體步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了vuex?store?緩存存儲原理，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)移動端觸屏拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
vue實現(xiàn)Excel文件的上傳與下載功能的兩種方式
這篇文章主要介紹了vue實現(xiàn)Excel文件的上傳與下載功能，本文通過兩種方式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue.js整合mint-ui里的輪播圖的方法,首先我們需要初始化vue項目，然后安裝mint-ui。具體內(nèi)容詳情大家通過學(xué)習(xí)2017-12-12