5分钟了解vue-router的基本使用
5分鐘了解vue-router的基本使用
?
目的: 了解?vue-router?的使用
閱讀時長: 5 分鐘
來源: 并非原創，整理自視頻
主要內容
正文
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 : 包含所有的屬性
- ?
-
- router組件install的時候，會注冊兩個全局組件
-
第二點:?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 吧
<template>
<div id="app">
<ul class="nav">
<li class="nav-item">
<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的鉤子以及執行順序如何
?
?
?
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笔记整理与总结
- 下一篇： vue-router参数传递