Vue笔记(10) vue-router

学习内容

⊙ 前端路由和后端路由

⊙ URL的hash

⊙ 认识vue-router

⊙ vue-router的使用

⊙ router-link

⊙ 动态路由

⊙ 路由懒加载

⊙ 路由嵌套‍

前端路由和后端路由

后端路由:

前后端分离:

前端路由:

本文由“壹伴编辑器”提供技术支持

URL的hash

一般来说,如果我们直接在URL地址栏中修改网址,整个页面都会刷新

如果我们用的是hash,那就不会出现这种情况了

我提前清空network

pushState

这种方法就类似于一个栈结构,最后push进去的URL会在栈顶,然后history.back()的时候就会出栈,也就会返回到我们上一个push进去的URL中

此时我们可以按浏览器左上角的前进后退

replaceState

使用history.replaceState()就无法保存历史记录,无法前进后退

go

go只能在pushState中使用, 我先pushState几个URL,然后用go实现跳转网页

现在往回go两个页面

本文由“壹伴编辑器”提供技术支持

认识vue-router

本文由“壹伴编辑器”提供技术支持

vue-router的使用

我是使用vue2创建的,脚手架为5.x, vue为2.x, 在创建项目时直接选了安装Vue-router

但是当时我创建项目的时候就选择了安装router,所以在src这个文件夹里面有router文件夹了

我还在网上搜索了一些资料:

我们把index.js删掉自己写

index.js

main.js

最基本的结构就是这样的

那么现在就要创建路由组件,到时候才可以让路径和路由对应起来

我在scr下的components文件夹下创建两个文件

我写了两个,一个主页(Home)页面的一个关于(About)页面的

那设置好这些该怎么使用呢?因为浏览器不知道我们什么时候使用哪个路由.所以我们还需要使用不同的标签,使我们的URL能发生改变

• router-link用于显示标签和内容
• router-view决定渲染时的位置,用于占位

App.vue

router-link是默认将内容渲染成a标签的

假如我现在将它换一个位置

显示出来的就是这样的

下面是一点细节问题,就是当我们打开页面时,应该自动打开首页,而不是需要我们手动选择

这样一打开就进入到首页了

但是可以发现,URL地址栏中总会有#,这是因为浏览器通过hash修改URL

默认是hash的模式,但是我们想把它改成history模式,给router增加一个mode属性即可

index.js

现在就没有啦

本文由“壹伴编辑器”提供技术支持

router-link补充

我们之前只使用了router-link的一个属性: to, 可以跳转到对应的路径,然后根据路径所对应的路由来渲染组件

router-link还有其他的属性

• tag: tag可以指定<router-link>之后渲染成什么组件,比如之前都是渲染成<a>, 但是其实可以渲染成其他类型的组件,比如按钮

App.vue

• replace: replace不会留下history记录,所以指定replace的情况下,后退键不能返回到上一个页面中

原来的

App.vue

修改

修改后

• active-class: 当<router-link>对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称
  • 在进行高亮显示的导航菜单或者tabbar时,会使用到该类
  • 但是通常不会修改类的属性,会直接使用默认的router-link-active即可

它的需求可能是这种: 点击了哪个按钮,就给哪个按钮变个颜色

现在给这个类添加样式:

但是我现在觉得这个类名太长了,我想修改它,就可以给router-link加一个active-class的属性,属性值为我们想要设置的类名

样式也要跟着修改:

一个一个改可能太麻烦了,所以有一个简便的方法:

但是这个一般不修改的

通过代码跳转网页

现在我希望直接放按钮,通过点击跳转到对应的页面

本文由“壹伴编辑器”提供技术支持

动态路由

假如我们在进入到用户的页面时想要在路径中显示用户的id,那么应该怎么实现这种动态路由呢?

首先在路由这里设置一下:

index.js

App.vue

另外,假如我们需要在user组件的界面上,也显示路径中的userId,即params,那该怎么做呢

这样的效果:

本文由“壹伴编辑器”提供技术支持

路由懒加载

当打包构建应用时,JavaScript包会变得很大,影响页面加载

如果我们能把不同路由对应的组件分割成不同代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了

如何使用懒加载:

本文由“壹伴编辑器”提供技术支持

路由嵌套

有时候我们的路由不止一层嵌套,而是有多层嵌套

比如我现在想在home里面嵌套两个路由,一个是新闻,一个是消息

现在需要在index.js里面嵌套两个路由进去,注意路径的问题

index.js

Home.vue

如果这里也要重定向的话,就和之前一样