大前端之 Vue Router

2021-10-10 15:20:47 字數 2839 閱讀 4866

本質上路由就是對應關係

1. 後端路由

3. 前端路由引入檔案

需要注意的是，兩者順序不能相反，因為vue-router依賴vue.js

"./lib/vue_2.5.22.js"


>


<


/script>


"./lib/vue-router_3.0.2.js"


>


<


/script>
提供路由變換的元件

const user =


const register =
編寫路由鏈結和路由點位符

<


!-- 路由鏈結，to屬性的值與routes陣列中配置的path對應 --


>


"/user"


>user<


/router-link>


"/register"


>register<


/router-link>


<


!-- 路由點位符，上面的路由鏈結後會被渲染到router-view這個位置 --


>


<


/router-view>
建立vue-router例項。並配置路由陣列

const router =


newvuerouter(,


]})
掛載router物件到vue例項

const vm =


newvue(,


// 掛載路由例項物件


// router: router, es6中屬性值與屬性名相當可以簡寫如下


router


})
注意：在配置路由規則時，如果陣列中的物件如下面所示，那麼訪問 / 路徑時，會被重定向到path路徑。

路由的巢狀，我們在vue-router的基本使用的基於上進行。

提供兩個子元件

const tab1 =


const tab2 =


const user =
將子元件的router-link放入register元件

const register =
配置路由規則

,]


}
路由元件中，可以通過$route.params.id獲取引數（注意此處是route而不是router）。

新增路由鏈結，以及路由點位符

<


!-- 路由鏈結 --


>


"/user/1"


>user1<


/router-link>


"/user/2"


>user2<


/router-link>


"/user/3"


>user3<


/router-link>


"/register"


>register<


/router-link>


<


!-- 路由點位符，上面的路由鏈結後會被渲染到router-view這個位置 --


>


<


/router-view>
提供user元件

const user =
定義路由規則

注：路由傳遞引數的方式，可以通過props進行，方法如下

在路由規則中開啟props傳參

在元件中接收props傳遞的引數

const user =
路由規則中的props的值，也可以是物件，如果是物件，則該物件傳遞的值可以被元件接收，此情況下id值無法被接收



}
在元件中接收props傳遞的引數

const user =
如果想要接收id的值，又要傳遞物件，需要使用route的箭頭函式



)}
定義方式，給路由規則增加name屬性

使用方式

:to=


"}">


user1router-link


>
注：此處params也可以是query前者類似post方式，後者類似get方式

所謂程式設計式路由其實就是不使用router-link進行跳轉，而是直接在js**中，呼叫對應方法進行跳轉，常用的方法有

this.$router.push(path)跳轉到path路徑

this.$router.push(object)跳轉到object指定的name的路由，並且可以新增引數

object示例1



}
object示例2



}
this.$router.go(number)

go方法常用於前進和後退，number為正代表前進number步，如果為負數則代表後退number步

大前端 說說的vue router的動態路由

如果乙個路由路徑為 home id,那麼不管 home user1還是 home user2 都會跳轉到 home id所對應元件 注意是 home id而不是 home id 乙個路徑引數使用 標記，當匹配到乙個路由時，引數值會被設定到this.route.params.可以在所要跳轉到的元件內用...

Vue 前端路由 vue router

1 前端路由 後端路由 多頁面，伺服器端渲染好返回給瀏覽器。前後端分離 後端只提供api來返回資料，前端通過ajax獲取資料後，在通過一定的方式渲染到頁面上。spa 前後端分離 前端路由。spa只有乙個html檔案，整個 的所有內容都在這乙個html裡，通過js來處理。2 vue router 路由...

前端路由與vue router

前端路由定義 在單頁面應用中，用hash改變來切換頁面，叫做前端路由 vue router 這就是vue路由。它是vue官方的路由外掛程式，適合構件單頁面應用。vue的但介面是依賴於路由和元件的的，路由用於設定訪問路徑，並將路徑和元件對映起來 router 路由匹配規則。每個路由匹配規則，都要包含兩...