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

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

目的: 了解 vue-router 的使用

阅读时长: 5 分钟

来源: 并非原创，整理自视频

主要内容

1. vue-route的基本使用
2. router的钩子以及执行顺序如何
3. router的参数传递方式

---

正文

router.gif

 

1.基本使用

1-1. 建立一个Route的文件夹，新建index.js

1. import Vue from 'vue';

2. import VueRouter from 'vue-router';

3. import Routes from './routes.js'

4.  

5. Vue.use(VueRouter);

6.  

7. export default new VueRouter {

8. mode: 'hash',

9. routes

10. }

11.  

12. 复制代码

以上代码注意两点:

• 第一点: 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

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

2. ...

3.  

4. export default [

5. {

6. path: '/', // 重定向到home页面

7. redirect: '/home'

8. },

9. {

10. path: '/home',

11. component: Home

12. }

13. ...

14. ]

15. 复制代码

1-3: main.js 中注册 router

1. ...

2. import router from './router'

3. ...

4. new Vue({

5. router,

6. render: h => h(App),

7. }).$mount('#app')

8. 复制代码

OK: 到这里，基本路由就已经实现了

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

1.  

2. <template>

3. <div id="app">

4. <ul class="nav">

5. <li class="nav-item">

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

7. </li>

8. </ul>

9. <router-view></router-view>

10. </div>

11. </template>

12.  

13. 复制代码

 

路由懒加载是这个样子的。

1.  

2. {

3. path: '/home',

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

5. }

6. 复制代码

嵌套路由是这个样子的。

1. {

2. path: '/user',

3. component: User,

4. // child 下面放需要嵌套的路径和视图

5. children: [

6. ...

7. {

8. path: '/add',

9. name: 'userAdd',

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

11. }

12. ...

13. ]

14. },

15. 复制代码

2. router的钩子以及执行顺序如何

 

1. 全局beforeEach: 一般用来做权限控制。
2. 路由中beforeEnter: 用的不多
3. 组件里调用 beforeRouteEnter: 这个方法里面没有this
4. 全局 router.resolve
5. 全局 afterEach
6. 调用组件的 beforeRouterLeave: 离开是提醒，是否提交表单，是否关注等等
7. beforeRouterUpdate

beforeRouterUpdate 用在路由参数更新了，但是路由没有更新时使用。

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

2. // 每个路由钩子都会有三个参数，是to、from、next

3. // 具体如何使用，我会单独写一个使用jwt权限控制的文章，在那里面结合实际使用来说明三个参数的使用和路由钩子的使用情况

4. })

5. 复制代码

这里，我只聊了下执行顺序，具体的可以参照官方手册，或者关注我下次的权限控制篇。

3. 参数如何传递

参数的传递方式有两种

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

• 路由里面传参数

1. vue代码如下:

2.  

3. <router-link to="/user/detail/1">用户1</router-link>

4. -----

5.  

6. routes代码如下:

7.  

8. {

9. // 路径里面传递参数是通过斜线传递的：比如/user/detail/1

10. path: 'detail/:id',

11. name: 'userDetail',

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

13. }

14. ----

15.  

16. 这种参数在组件里面如何获取呢？

17.  

18. this.$route.params.id

19.  

20. 复制代码

• 路径里面问号形式传参数

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

2.  

3. 这种传递方式如何在组件里面获取参数呢？

4.  

5. this.$route.query.id

6. 复制代码

---

总结: 本文简单的聊了一下，如何去初始化一个路由，嵌套路由，路由钩子的执行顺序以及参 数的传递方式。