前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue笔记(10) vue-router

Vue笔记(10) vue-router

作者头像
y191024
发布2022-09-20 20:50:58
8700
发布2022-09-20 20:50:58
举报
文章被收录于专栏:睡不着所以学编程

学习内容

⊙ 前端路由和后端路由

⊙ 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

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-04-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 睡不着所以学编程 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档