vue-router相信大家都不陌生，并且很多都有實戰(zhàn)經(jīng)驗。可能有很多你忽略的一些點(diǎn)。

1、丑陋的hash值

vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當(dāng) URL 改變時，頁面不會重新加載。

const router = new VueRouter({ mode: 'history', routes: [...] })

當(dāng)你使用 history 模式時，URL 就像正常的 url，例http://yoursite.com/user/id，也好看！但是這種模式需要后端支持，否則就會返回404，所以最好在服務(wù)器端加一個覆蓋所有情況的候選資源：匹配不到就返回同一個index.html,即你app的依賴頁面。

nginx的配置：

location / { try_files $uri $uri/ /index.html; }

但是這里有個問題你所有的訪問都只會跳轉(zhuǎn)到index.html頁面了，這樣就沒有達(dá)到路由的目的了。別擔(dān)心，看下面的例子

const NotFound = { template: '<p>Page not found</p>' } const Home = { template: '<p>home page</p>' } const About = { template: '<p>about page</p>' } const routes = { '/': Home, '/about': About} new Vue({ el: '#app', data: { currentRoute: window.location.pathname //獲取當(dāng)前地址},computed: {ViewComponent () { return routes[this.currentRoute] || NotFound}},render (h) { return h(this.ViewComponent) } })

這樣就會根據(jù)當(dāng)前地址去找到對應(yīng)的路由跳轉(zhuǎn)。

2、動態(tài)路由匹配

（1）路由參數(shù)匹配

假設(shè)我們有個頁面，只是想要根據(jù)不同的參數(shù)來顯示不同的頁面，如：/user/foo 和 /user/bar 都將映射到相同的路由，但是根據(jù)參數(shù)foo/bar來顯示不同的頁面。

const User = { template: '<div>User</div>' }const router = new VueRouter({ routes: [ // 動態(tài)路徑參數(shù) 以冒號開頭{ path: '/user/:id', component: User }] })

“路徑參數(shù)”使用冒號 : 標(biāo)記，當(dāng)匹配到一個路由時，參數(shù)值會被設(shè)置到 this.

3、同級展示多個視圖

有時候想同時 (同級) 展示多個視圖，而不是嵌套展示，例如創(chuàng)建一個布局，有 sidebar (側(cè)導(dǎo)航) 和 main (主內(nèi)容) 兩個視圖，這時就可以使用命名視圖了。如果 router-view 沒有設(shè)置name名字，那么默認(rèn)為 default。

<router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view>

一個視圖使用一個組件渲染，因此對于同個路由，多個視圖就需要多個組件。確保正確使用 components 配置 (帶上 s)：

const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, //default 默認(rèn)的router-view名字 a: Bar, b: Baz } } ] })

4、重定向和別名
“重定向”的意思是，當(dāng)用戶訪問 /a時，URL 將會被替換成 /b，然后匹配路由為 /b。 routes 配置來完成，下面例子是從 /a 重定向到 /b：

const router = new VueRouter({ routes: [{ path: '/a', redirect: '/b' }] })

重定向的目標(biāo)也可以是一個命名的路由：

const router = new VueRouter({ routes: [{ path: '/a', redirect: { name: 'foo' }}] })

甚至是一個方法，動態(tài)返回重定向目標(biāo)：

const router = new VueRouter({ routes: [{ path: '/a', redirect: to => { // 方法接收 目標(biāo)路由 作為參數(shù) // return 重定向的 字符串路徑/路徑對象}}] })

注意導(dǎo)航守衛(wèi)并沒有應(yīng)用在跳轉(zhuǎn)路由上，而僅僅應(yīng)用在其目標(biāo)上。在下面這個例子中，為 /a 路由添加一個 beforeEach 或 beforeLeave 守衛(wèi)并不會有任何效果。

別名：/a 的別名是 /b，意味著，當(dāng)用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。

const router = new VueRouter({routes: [{ path: '/a', component: A, alias: '/b' }] })

5、路由組件傳參

在組件中使用 route.params可以在組件內(nèi)使用。因此我們可以根據(jù)參數(shù)去更新我們的模版。注意：當(dāng)使用路由參數(shù)跳轉(zhuǎn)的時候，原來的組件實例會被復(fù)用。（不會銷毀再創(chuàng)建，因此組件的生命周期鉤子不會再被調(diào)用）3、同級展示多個視圖有時候想同時(同級)展示多個視圖，而不是嵌套展示，例如創(chuàng)建一個布局，有sidebar(側(cè)導(dǎo)航)和main(主內(nèi)容)兩個視圖，這時就可以使用命名視圖了。如果router?view沒有設(shè)置name名字，那么默認(rèn)為default?！4G一個視圖使用一個組件渲染，因此對于同個路由，多個視圖就需要多個組件。確保正確使用components配置(帶上s)：¨G5G4、重定向和別名“重定向”的意思是，當(dāng)用戶訪問/a時，URL將會被替換成/b，然后匹配路由為/b。routes配置來完成，下面例子是從/a重定向到/b：¨G6G重定向的目標(biāo)也可以是一個命名的路由：¨G7G甚至是一個方法，動態(tài)返回重定向目標(biāo)：¨G8G注意導(dǎo)航守衛(wèi)并沒有應(yīng)用在跳轉(zhuǎn)路由上，而僅僅應(yīng)用在其目標(biāo)上。在下面這個例子中，為/a路由添加一個beforeEach或beforeLeave守衛(wèi)并不會有任何效果。別名：/a的別名是/b，意味著，當(dāng)用戶訪問/b時，URL會保持為/b，但是路由匹配則為/a，就像用戶訪問/a一樣?！9G5、路由組件傳參在組件中使用route 會使之與其對應(yīng)路由形成高度耦合，從而使組件只能在某些特定的 URL 上使用，限制了其靈活性。使用 props 將組件和路由解耦。

const User = {props: ['id'],template: '<div>User {{ id }}</div>' } const router = new VueRouter({routes: [{ path: '/user/:id', component: User, props: true },// 對于包含命名視圖的路由，你必須分別為每個命名視圖添加 `props` 選項：{path: '/user/:id',components: { default: User, sidebar: Sidebar },props: { default: true, sidebar: false }}] })

6、過渡動效

是基本的動態(tài)組件，所以我們可以用 組件給它添加一些過渡效果：

<!-- 使用動態(tài)的 transition name --> <transition :name="transitionName"> <router-view></router-view> </transition>

7、數(shù)據(jù)獲取

有時候，進(jìn)入某個路由后，需要從服務(wù)器獲取數(shù)據(jù)。例如，在渲染用戶信息時，你需要從服務(wù)器獲取用戶的數(shù)據(jù)。我們可以通過兩種方式來實現(xiàn)：

導(dǎo)航完成之后獲取：先完成導(dǎo)航，然后在接下來的組件生命周期鉤子中獲取數(shù)據(jù)。在數(shù)據(jù)獲取期間顯示“加載中”之類的指示。created

導(dǎo)航完成之前獲取：導(dǎo)航完成前，在路由進(jìn)入的守衛(wèi)中獲取數(shù)據(jù)，在數(shù)據(jù)獲取成功后執(zhí)行導(dǎo)航。beforeRouteEnter

從技術(shù)角度講，兩種方式都不錯 —— 就看你想要的用戶體驗是哪種。

8、滾動行為

使用前端路由，當(dāng)切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。

注意: 這個功能只在支持 history.pushState 的瀏覽器中可用。

當(dāng)創(chuàng)建一個 Router 實例，你可以提供一個 scrollBehavior 方法：

const router = new VueRouter({ routes: [...],scrollBehavior (to, from, savedPosition) { // return 期望滾動到哪個的位置} })

scrollBehavior 方法接收 to 和 from 路由對象。第三個參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時才可用。

// 對于所有路由導(dǎo)航，簡單地讓頁面滾動到頂部。 scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } }

如果你覺得本文對您有用可掃碼關(guān)注我的微信公眾號，會為您帶來更多的精彩內(nèi)容

總結(jié)

以上是生活随笔為你收集整理的vue 传参 微信_vue-router 你可能忽略的知识点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。