當前位置：首頁 > 前端技术 > vue >内容正文

vue

5分钟了解vue-router的基本使用

發布時間：2025/3/21 vue 57 豆豆

生活随笔收集整理的這篇文章主要介紹了 5分钟了解vue-router的基本使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

5分鐘了解vue-router的基本使用

目的: 了解?vue-router?的使用

閱讀時長: 5 分鐘

來源: 并非原創，整理自視頻

主要內容

vue-route的基本使用

router的鉤子以及執行順序如何

router的參數傳遞方式

正文

router.gif

1.基本使用

1-1. 建立一個Route的文件夾，新建index.js

import Vue from 'vue';

import VueRouter from 'vue-router';

import Routes from './routes.js'

Vue.use(VueRouter);

export default new VueRouter {

mode: 'hash',

routes

}

復制代碼

以上代碼注意兩點:

第一點: vue 的第三方組件，都需要通過Vue.use( . . . )的方式去 install 組件。
- router組件install的時候，會注冊兩個全局組件
  - router-link : 跳轉
  - router-view : 在什么地方顯示內容
- 每個組件上會有兩個屬性(我曾經一度不知道 router 和 route 的區別, 記住下面的兩點，將不用再去犯錯了。)
  - $router : 包含所有的方法
    - $router.push({path:'home'})
    - $router.replace({path:'home'})//替換路由，沒有歷史記錄
  - $route : 包含所有的屬性
    - ?
第二點:?export default new VueRouter ({ })?里面有各種屬性和路由的映射表
- mode: hash: 默認值，/#/
- mode: history: /
- routes 路由映射，什么路由顯示什么vue組件
- ...

1-2: 建立routes.js

import Home from '../view/Home.vue';

...

export default [

{

path: '/', // 重定向到home頁面

redirect: '/home'

{

path: '/home',

component: Home

}

...

]

復制代碼

1-3: main.js 中注冊 router

...

import router from './router'

...

new Vue({

router,

render: h => h(App),

}).$mount('#app')

復制代碼

OK: 到這里，基本路由就已經實現了

咱們去app.js使用router-link 和 router-view 吧

<router-link class="nav-link" to="/home">Home</router-link>

</li>

</ul>

<router-view></router-view>

</div>

</template>

復制代碼

路由懶加載是這個樣子的。

{

path: '/home',

component: () => import('../view/Home.vue')

}

復制代碼

嵌套路由是這個樣子的。

{

path: '/user',

component: User,

// child 下面放需要嵌套的路徑和視圖

children: [

...

{

path: '/add',

name: 'userAdd',

component: () => import('../view/UserAdd.vue')

}

...

]

復制代碼

2. router的鉤子以及執行順序如何

全局beforeEach: 一般用來做權限控制。

路由中beforeEnter: 用的不多

組件里調用 beforeRouteEnter: 這個方法里面沒有this

全局 router.resolve

全局 afterEach

調用組件的 beforeRouterLeave: 離開是提醒，是否提交表單，是否關注等等

beforeRouterUpdate

beforeRouterUpdate 用在路由參數更新了，但是路由沒有更新時使用。

router.beforeEach((to, from, next) => {

// 每個路由鉤子都會有三個參數，是to、from、next

// 具體如何使用，我會單獨寫一個使用jwt權限控制的文章，在那里面結合實際使用來說明三個參數的使用和路由鉤子的使用情況

})

復制代碼

這里，我只聊了下執行順序，具體的可以參照官方手冊，或者關注我下次的權限控制篇。

3. 參數如何傳遞

參數的傳遞方式有兩種

路由:/detail/1 Vs 路徑：/detail?id=1

路由里面傳參數

vue代碼如下:

<router-link to="/user/detail/1">用戶1</router-link>

-----

routes代碼如下:

{

// 路徑里面傳遞參數是通過斜線傳遞的：比如/user/detail/1

path: 'detail/:id',

name: 'userDetail',

component: () => import('../view/UserDetail.vue')

}

----

這種參數在組件里面如何獲取呢？

this.$route.params.id

復制代碼

路徑里面問號形式傳參數

<router-link to="/user/detail?id=1">用戶1</router-link>

這種傳遞方式如何在組件里面獲取參數呢？

this.$route.query.id

復制代碼

總結: 本文簡單的聊了一下，如何去初始化一個路由，嵌套路由，路由鉤子的執行順序以及參數的傳遞方式。

總結

以上是生活随笔為你收集整理的5分钟了解vue-router的基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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

Vue
router