vue升級之路（三）-- vue-router的使用

PE-tree發表於2018-08-14
Vue

使用 Vue 構建的專案，一個頁面是由多個元件構成的，而且經常是做成單頁面應用，所以在跳轉頁面的時候，傳統的 href 已經跟不上時代的步伐了，於是 vue-router 應運而生

在使用 vue-router 的時候，需要看看自己是否裝了這個依賴，沒有的話可以使用 npm install vue-router -S ，不過現在構建vue專案時有可以選擇是否安裝 vue-router，大家注意一下就行了

一、路由的配置

自動安裝的vue-router，會在src 資料夾下有個一個 router -> index.js 檔案 在 index.js 中建立 routers 物件，引入所需的元件並配置路徑

路由配置.jpg

在建立的 routers 物件中， path 配置了路由的路徑，component 配置了對映的元件

然後在main.js裡面引入router檔案

引入路由檔案.jpg

在建立的 router 物件中，如果不配置 mode，就會使用預設的 hash 模式，該模式下會將路徑格式化為 #! 開頭。

新增 mode: 'history' 之後將使用 HTML5 history 模式，該模式下沒有 # 字首，而且可以使用 pushState 和 replaceState 來管理記錄。

關於 HTML5 history 模式的更多內容，可以自行度娘

二、巢狀路由

在構建的vue例項中，為了加深專案層級，App.vue 只是作為一個存放元件的容器

app.png

其中 是用來渲染通過路由對映過來的元件，當路徑更改時， 中的內容也會發生更改

上面已經配置了兩個路由，當開啟 http://localhost:8080 或者 http://localhost:8080/index的時候，就會在 中渲染 index.vue 元件 index.vue 是真正的父元件，其它的子元件都會渲染到 index.vue 中的

父元件.jpg

想要在一級路由中實現巢狀二級路由，就要修改 router -> index.js

巢狀路由.jpg

在配置的路由後面，新增 children，並在 children 中新增二級路由，就能實現路由巢狀。 配置 path 的時候，以 " / " 開頭的巢狀路徑會被當作根路徑，所以子路由的 path 需不需要新增 " / " 就要看個人需求了

三、使用 對映路由

如果只需要跳轉頁面，不需要新增驗證方法的情況，可以使用 來實現導航的功能：

 <router-link class="item"  to="/index/login" >{{ text }}</router-link>
 <router-link class="item"  :to="{path:url, query:data}" >{{ text }}</router-link>
複製程式碼

在編譯之後， 會被渲染為 a 標籤， to 會被渲染為 href，當 被點選的時候，url 會發生相應的改變

如果使用 v-bind 指令，還可以在 to 後面接變數，配合 v-for 指令可以渲染路由選單

如果需要傳入不同引數 ，可以在路由中新增動態引數，給 to 傳入一個物件

{
  path: item.url,
  query: { id: '007' }
}
複製程式碼

然後還可以使用 $route.query.id 來獲取到對應的引數

四、程式設計式導航

然而在實際專案下，有很多連結在執行跳轉之前，還會執行方法對資料進行處理，這時可以使用 this.$router.push(location) 來修改 url 完成跳轉

// 繫結goLogin
<button class="login" @click="goLogin"></button>
// 定義goLogin
methods: {
        goLogin() {
            this.routes.push('/login')
        }
    },
複製程式碼

push 後面可以是物件，也可以是字串：

// 字串
this.$router.push('/index')

// 物件
this.$router.push({ path: '/index' })

// 命名的路由
this.$router.push({ name: 'login', params: { userId: '123' }})
複製程式碼

相關文章