学习内容
⊙ 前端路由和后端路由
⊙ 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能发生改变
App.vue
router-link是默认将内容渲染成a标签的
假如我现在将它换一个位置
显示出来的就是这样的
下面是一点细节问题,就是当我们打开页面时,应该自动打开首页,而不是需要我们手动选择
这样一打开就进入到首页了
但是可以发现,URL地址栏中总会有#,这是因为浏览器通过hash修改URL
默认是hash的模式,但是我们想把它改成history模式,给router增加一个mode属性即可
index.js
现在就没有啦
本文由“壹伴编辑器”提供技术支持
router-link补充
我们之前只使用了router-link的一个属性: to, 可以跳转到对应的路径,然后根据路径所对应的路由来渲染组件
router-link还有其他的属性
App.vue
原来的
App.vue
修改
修改后
它的需求可能是这种: 点击了哪个按钮,就给哪个按钮变个颜色
现在给这个类添加样式:
但是我现在觉得这个类名太长了,我想修改它,就可以给router-link加一个active-class的属性,属性值为我们想要设置的类名
样式也要跟着修改:
一个一个改可能太麻烦了,所以有一个简便的方法:
但是这个一般不修改的
通过代码跳转网页
现在我希望直接放按钮,通过点击跳转到对应的页面
本文由“壹伴编辑器”提供技术支持
动态路由
假如我们在进入到用户的页面时想要在路径中显示用户的id,那么应该怎么实现这种动态路由呢?
首先在路由这里设置一下:
index.js
App.vue
另外,假如我们需要在user组件的界面上,也显示路径中的userId,即params,那该怎么做呢
这样的效果:
本文由“壹伴编辑器”提供技术支持
路由懒加载
当打包构建应用时,JavaScript包会变得很大,影响页面加载
如果我们能把不同路由对应的组件分割成不同代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了
如何使用懒加载:
本文由“壹伴编辑器”提供技术支持
路由嵌套
有时候我们的路由不止一层嵌套,而是有多层嵌套
比如我现在想在home里面嵌套两个路由,一个是新闻,一个是消息
现在需要在index.js里面嵌套两个路由进去,注意路径的问题
index.js
Home.vue
如果这里也要重定向的话,就和之前一样