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

栏目: JavaScript · 发布时间: 5年前

内容简介:目的: 了解阅读时长: 5 分钟来源: 并非原创,整理自视频

目的: 了解 vue-router 的使用

阅读时长: 5 分钟

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

主要内容

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

正文

router.gif

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

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 : 包含所有的

        • 5分钟了解vue-router的基本使用
  • 第二点: 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>

复制代码
5分钟了解vue-router的基本使用

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

{
  path: '/home',
  component: () => import('../view/Home.vue')
}
复制代码

嵌套路由是这个样子的。

{
    path: '/user',
    component: User,
    // child 下面放需要嵌套的路径和视图
    children: [
      ...
      {
        path: '/add',
        name: 'userAdd',
        component: () => import('../view/UserAdd.vue')
      }
      ...
    ]
  },
复制代码

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

5分钟了解vue-router的基本使用
  1. 全局beforeEach: 一般用来做权限控制。
  2. 路由中beforeEnter: 用的不多
  3. 组件里调用 beforeRouteEnter: 这个方法里面没有this
  4. 全局 router.resolve
  5. 全局 afterEach
  6. 调用组件的 beforeRouterLeave: 离开是提醒,是否提交表单,是否关注等等
  7. 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
复制代码

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

还有路由守卫在权限控制中使用情况并未介绍,我将在下一篇去写一个完整的小demo,讲述路由钩子在权限控制中的使用,jwt的使用,已及权限控制实现的基本实现。

ps: 我是一个前端初学者,博客完全是记录自己学习的一种方式,所写文字肯定有不清晰和不完善以及错误的地方。如果不妥之处,希望大神的批评指正,将不胜感激。

谢谢观看!

我是海明月,前端小学生。


以上所述就是小编给大家介绍的《5分钟了解vue-router的基本使用》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据挖掘导论

数据挖掘导论

Pang-Ning Tan, Michael Steinbach / 范明 范宏建 / 人民邮电出版社 / 2006-01-01 / 49.00元

本书全面介绍了数据挖掘的理论和方法,旨在为读者提供将数据挖掘应用于实际问题所必需的知识。本书涵盖五个主题:数据、分类、关联分析、聚类和异常检测。除异常检测外,每个主题都包含两章:前面一章讲述基本概念、代表性算法和评估技术,后面一章较深入地讨论高级概念和算法。目的是使读者在透彻地理解数据挖掘基础的同时,还能了解更多重要的高级主题。此外,书中还提供了大量示例、图表和习题。 本书适合作为......一起来看看 《数据挖掘导论》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码