vue router的使用方式

2021-10-03 19:03:56 字數 1596 閱讀 4413

vue-router的使用過程：

​ 一.建立vue-router元件

一般使用vue-router的元件都是檢視級別的，也就是由多個元件組成，為了區分router元件與常規的小組件components，我們建立與components同等級的新資料夾：views，用於存放相關的router元件。
​ 二.配置vue-router相關路由資訊

1.建立與views，main.js同級別的router資料夾，用於存放router的配置資訊index.js。
​ 2.在index.js中，我們首先需要引入通過安裝好的vue-router外掛程式，由於我們需要使用到全域性的vue框架，通過vue.use(vuerouter)來完成對vue-router的應用，所以我們還需要引入vue，由於我們在路由中需要對views中的元件進行註冊,所以我們仍然需要將所有的views元件進行引入

​ 也就是說，在邏輯層面我們需要引入（import）：

​ a.vue

​ b.vue-router

c.所有使用到的元件
import vue from


"vue"


;import vuerouter from


"vue-router"


;import home from


"../components/home.vue"


;import about from


"../components/about.vue"


;
​ 3.通過vue.use(vuerouter)整合vue與外掛程式vue-router

//1.通過vue.use(外掛程式),安裝外掛程式


vue.use(vuerouter);
​ 4.書寫配置陣列routers的配置，陣列中每個元素均為json物件，基本用法為：

const routers=
​ 5.通過呼叫vuerouter的建構函式，將routers陣列作為引數{}建立vue-router物件，實現vue-router的例項化。

//2.建立vue-router物件


const router =


newvuerouter()


;
​ 6.將定義好的router物件匯出。

//4.將定義好的vue-router物件匯出


export default router;
​ 7.在main.js中，匯入定義好的router物件。

//5.引入router物件


import router from


'./router'
完整**：

new


vue().


$mount


()
​ 三.使用vue-router，應用路由

注意：元件會被編譯為a標籤，而會被定義的元件完全代替（起到佔位的作用，類似slot)

vue router 頁面引數方式

1，命名路由 註冊路由的地方需要給路由命名如下圖 this.router.push 接受方法如下 this.route.params.userid2，查詢引數 查詢引數其實就是在路由位址後面帶上引數和傳統的url引數一致的 使用方法如下 this.router.push 接受方法如下 this.ro...

VueRouter的簡單使用

1.有乙個html檔案裡的dom元素 的id 作為vue例項掛載的入口 2.建立vuerouter檔案 import vue from vue import vuerouter from vue router import vuerouter import helloworld from compo...

vue router的基本使用

基本使用步驟 script 新增路由鏈結 router link是vue中提供的標籤，缺省會被渲染為a標籤 to屬性缺省會被渲染為 href 屬性 to屬性的值缺省會被渲染為 開頭的hash位址 user router link 新增路由填充位 路由填充位 也叫路由佔位符 將來通過路由規則匹配到的元...