vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue-router 详解

vue-router安装和使用详解

作者:七月J

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,分步骤介绍了安装和使用vue-router的方法,感兴趣的朋友跟随小编一起看看吧

1、认识vue-router

目前前端流行的三大框架,都有自己的路由实现:

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/

vue-router是基于路由和组件的

2、安装和使用vue-router

第一步:安装vue-router npm install vue-router --save

第二步:在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()来安装路由功能)

使用vue-router的步骤:

代码实现步骤:

创建router实例

在这里插入图片描述

挂载到Vue实例中

在这里插入图片描述

第一步:创建路由组件

在这里插入图片描述

第二步:配置组件和路由的映射关系

在这里插入图片描述

第三步:使用路由

在这里插入图片描述

3、路由的默认路径

默认情况下,进入网站的首页,我们希望渲染首页的内容。但是我们的实现中,默认没有显示首页组件,必须让用户点击才可以。

如何可以让路径默认跳转到首页,并且渲染首页组件呢?我们需要多配置一个映射就可以了

{
  path: '/',
  redirect: '/home'
},

配置解析:

4、HTML5的History模式

改变路径的方式有两种:

如果希望使用HTML5的history模式,进行如下的配置:

在这里插入图片描述

5、router-link属性介绍

6、路由代码跳转

有的时候,页面的跳转可能需要执行相应的JavaScript代码,这个时候,就可以使用第二种跳转方式了。

比如我们将代码修改如下:

在这里插入图片描述

7、动态路由

在某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下的路径:

在这里插入图片描述

8、路由懒加载

路由懒加载的方式

方式一:结合Vue的异步组件和Webpack的代码分析

const Home = resolve => { require. ensure(['../ components/Home.vue'], () => { resolve(require('../ components/Home.vue')) })};

方式二:AMD写法

const About = resolve => require([' ../ components/ About.vue'], resolve);

​​​​​​​方式三:在ES6中,我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割

const Home = () => import(' . ./ components/Home.vue ' )

路由懒加载的效果

在这里插入图片描述

9、嵌套路由实现

在这里插入图片描述

10、传递参数的方式

传递参数主要有两种类型:params和query

11、导航守卫的使用

我们可以利用beforeEach来完成标题的修改

导航钩子的三个参数解析:

在这里插入图片描述

如果是后置钩子,也就是afterEach,不需要主动调用next()函数。

上面我们使用的导航守卫,被称之为全局守卫。

12、TabBar实现思路

效果图:

在这里插入图片描述

到此这篇关于vue-router 详解的文章就介绍到这了,更多相关vue-router 详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文