vue-router理解及使用(基于vue2.x)--01

一.vue-router理解及使用

为什么会有前端路由?
1.在我们最开始开发的时候,可能前后端是一体化的,需要我们后端人员使用jsp模板引擎渲染出我们的页面,直接返回给浏览器。
2. 到了后期,又前端人员,编写html+js+css,客户通过浏览器请求这些静态文件,访问数据时,可以使用ajax等技术,向后端请求数据,再通过js动态的把数据插入到html中,这样也不太好,每个页面我们都要对应的写一套html+css+js。
3.现在我们通过vue框架,也可以动态的显示数据了,因为vue存在了一个核心,叫做组件化,而且我们使用webpack打包时,会把所有的文件打包成一个或多个文件,客户访问时,可以直接下载这些静态文件就可以了,那么我们是不是可以这么做,客户一开始访问,就把所有的静态文件下载到浏览器,然后当客户切换页面时,不用发送请求再次下载资源,形成页面的切换呢?
我们就可以使用vue-router来实现,现在我们打包之后,会把我们编写的资源打包成一个包,客户访问,直接把这个包下载到浏览器,当客户切换页面,浏览器路径会变,但是不会再请求静态资源服务器,而是通过我们配置的前端路由,找到对应的组件,把组件显示给用户,这就是前端路由。

以上废话过多,简单来说,vue-router就是解决:客户一开始加载下来所有的静态资源,每次切换页面,都不从新加载静态资源,而是通过路由的形式,找到对应的组件,显示给用户。这样大大减少了服务器的压力!这种其实也就是spa应用(单页面富应用),只有一个html,切换页面,只需要切换对应的组件即可。

二.url的hash和html5的history

我们知道了前端路由的实现方式其实就是:改变路径内容,而不改变整体内容的刷新。
有两种实现方式:
1.使用url的hash
本质上使用的是window.location的href属性实现的
使用方式:location.hash=‘xxx’

2.使用html5的history对象(历史记录)
history.pushState({},’’,‘路径’):向栈压进一个
history,replaceState({},’’,‘路径’):浏览器不能前进后退
history.back():去除栈顶端一个
history.go():里面参数为数字,整数前进,负数后退
history.forward();前进一个历史记录

以上两种方式都可以实现,但是hash的路径上会有一个#,而且vue-router默认使用这种方式

三.如何使用vue-router

  1. 创建项目(使用vue cli创建项目,创建项目时,选择2.x版本)

  2. 安装vue-router(可以创建项目的时候,直接添加依赖)

1,使用命令行:
npm install vue-router --save
2.使用vue ui的方式:
在这里插入图片描述

  1. 在模块化使用vue-router,并配置规则

因为vue-router是一个依赖,所以要使用Vue.use()来安装到项目中
注意:使用Vue ui的方式添加的vue-router是没有router这个目录的,我们需要自己创建一个这个目录,并且创建一个index.js的文件,vue-router会自动执行这个index.js。
在这里插入图片描述

4.导入vue-router

需要在main.js中导入并挂载vue-router才能使用路由
在这里插入图片描述

5.使用vue-router

上边的步骤,只是默认的配置了vue-router,还没有真正的使用
使用步骤:
1.创建路由组件(就是对应的路由,加载那个页面)

在这里插入图片描述
这里我们创建了两个路由组件,并对应导出了

2.配置路由规则
在我们刚才配置的index.js中,可以配置我们的路由映射规则
路由的而规则是成对出现的

在这里插入图片描述

3.使用路由
配置好以上步骤之后,我们就可以使用我们的路由了:

在这里插入图片描述

使用路由时,有两个标签:
router-link:标注了这个标签使用路由,默认页面显示的是a标签,to属性就是代表的路由,这里要和我们在index中配置的path映射。
router-view:我们使用路由找到对应的路由组件,路由组件的内容就会在这个里面显示

在这里插入图片描述

最终效果:
在这里插入图片描述

四.怎么在我们输入http://8080时,直接显示首页内容

可以在index的映射规则里面,配置如下:

{
        //当监听到路由的路径为 空或者'/',重定向到home的路由上   效果:用户进入页面,没有跳转路径,也会显示home页
        path : '',
        redirect : '/home'
    }

这时,我们路径上没有任何路由时,默认找这个映射规则,通过redirect重定向到/home的路由映射规则上,就能在我们进入系统时,默认显示首页

五.修改默认的跳转规则

vue-router使用的是hash跳转规则,但是这个规则在我们跳转路由时,路径上会有一个#

我们可以修改配置,变为history模式,即可解决:

//创建vue-router对象
const router = new VueRoute({
    //路由的映射规则   routes = routes
    routes,
    //vue-router的默认跳转规则为hash,但是路径带有#,这里使用history方式,替代hash,路径不会有#
    mode : 'history',
})

效果:

在这里插入图片描述

六.router-link标签的其他属性

1.tag=xxx:默认router-link显示为一个a标签,可以通过tag这个属性,变为我们想要的样子,xxx就代表标签名
2.replace:replace修饰之后,页面跳转路由后,不可以前进后退(历史记录)
3.active-class=xxx:router-link默认生成a标签后,通过路由跳转成功后的这个标签上,会默认生成一个router-link-active的class,我们可以通过active-class=xxx改变这个class的名字。

在这里插入图片描述

还可以同过在index中配置,让默认的class名称改变:linkActiveClass

const router = new VueRoute({
    //路由的映射规则   routes = routes
    routes,
    //vue-router的默认跳转规则为hash,但是路径带有#,这里使用history方式,替代hash,路径不会有#
    mode : 'history',
    linkActiveClass: 'haha'
})

七.通过事件来跳转路由

可能有的时候,我们想要在跳转路由的时候,写一些js代码,我们就可以使用一下方式跳转路由

在这里插入图片描述

八.动态路由

我们可能在项目中不只有这种的路径,可能会有:/user/xxx这种的路由,例如:/user/123 /user/234 ,前边的/user固定,后边的123、234则是不固定的,我们称为动态路由

1.创建一个我的路由,跳转路径为:/user/123在这里插入图片描述
2.配置路由规则
在这里插入图片描述
3.路由组件User在这里插入图片描述
效果:

在这里插入图片描述

这样可以实现跳转,但是意义不大,我们最主要还是想要接收这个id,我们可以通过:
this.$route.params.xxx:这里的xxx就是上边的/user/:id这里面的id
这样就可以接收id的值了。

在这里插入图片描述

在这里插入图片描述

还可以简写为:
{{$route.params.xxx}}直接显示
还需要注意:路由规则写的是什么就要匹配什么,例如:/user/:id不能传递路由是写成/user,这样就不符合路由规则,跳转不了。

九.路由的懒加载

上述的方式编写路由规则,是我们先导入路由组件,然后再匹配路由规则的,这种方式其实是把所有我们编写的js,打包到了一个js文件中

在这里插入图片描述

当我们以后编写的js量过大时,客户第一次加载,需要把js下载到浏览器,那么由于js量庞大,就会造成首次访问,长时间显示成空白页,对客户的体验很不好
解决方案:使用vue-router的路由懒加载模式,使用之后,标注了懒加载的js,就不会打包到一个js里面,而是分开打包,当客户第一次加载的时候,就不会加载这些js文件,而是等到用到的时候,再加载

在这里插入图片描述

懒加载的方式:

在这里插入图片描述

十.嵌套路由

什么是嵌套路由:
在我们使用网站时,可能首页会有一些其他的按钮,点击之后,会在首页内显示内容,这是我们的路由就可能写为:/home/news这样的,这就是嵌套路由

使用:
1.创建两个home下的子组件
在这里插入图片描述

2.再home中编写路由
在这里插入图片描述
3.编写index路由规则:
在这里插入图片描述
4.效果:
在这里插入图片描述

也可以添加默认路由,跳转进home页,就显示那个路由内容:

在这里插入图片描述

以上就是本人对router的一部分的初步理解,写的比较乱,练习到哪里总结到哪里。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页