vue-router相信大家都不陌生，并且很多都有實戰經驗。可能有很多你忽略的一些點。

1、丑陋的hash值

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

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

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

nginx的配置：

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

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

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 //獲取當前地址},computed: {ViewComponent () { return routes[this.currentRoute] || NotFound}},render (h) { return h(this.ViewComponent) } })

這樣就會根據當前地址去找到對應的路由跳轉。

2、動態路由匹配

（1）路由參數匹配

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

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

“路徑參數”使用冒號 : 標記，當匹配到一個路由時，參數值會被設置到 this.

3、同級展示多個視圖

有時候想同時 (同級) 展示多個視圖，而不是嵌套展示，例如創建一個布局，有 sidebar (側導航) 和 main (主內容) 兩個視圖，這時就可以使用命名視圖了。如果 router-view 沒有設置name名字，那么默認為 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 默認的router-view名字 a: Bar, b: Baz } } ] })

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

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

重定向的目標也可以是一個命名的路由：

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

甚至是一個方法，動態返回重定向目標：

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

注意導航守衛并沒有應用在跳轉路由上，而僅僅應用在其目標上。在下面這個例子中，為 /a 路由添加一個 beforeEach 或 beforeLeave 守衛并不會有任何效果。

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

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

5、路由組件傳參

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

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

<!-- 使用動態的 transition name --> <transition :name="transitionName"> <router-view></router-view> </transition>

7、數據獲取

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

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

導航完成之前獲取：導航完成前，在路由進入的守衛中獲取數據，在數據獲取成功后執行導航。beforeRouteEnter

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

8、滾動行為

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

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

當創建一個 Router 實例，你可以提供一個 scrollBehavior 方法：

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。