遵义市住房城乡建设局网站,东莞浩智网站建设多少钱,网站网络推广策略和电子商务,编程常用网站一、什么是路由
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面#xff0c;所有组
件的展示与切换都在这唯一的一个页面内完成。
此时#xff0c;不同组件之间的切换需要通过前端路由来实现。
结论#xff1a;在 SPA 项目中#xff0c;不同功能之间的切换#xff0…一、什么是路由
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面所有组
件的展示与切换都在这唯一的一个页面内完成。
此时不同组件之间的切换需要通过前端路由来实现。
结论在 SPA 项目中不同功能之间的切换要依赖于前端路由来
完成
二、前端路由的工作方式
① 用户点击了页面上的路由链接
② 导致了 URL 地址栏中的 Hash 值发生了变化
③ 前端路由监听了到 Hash 地址的变化
④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中 结论前端路由指的是 Hash 地址与组件之间的对应关系 三、路由的使用 ①、使用脚手架创建项目在创建项目中配置路由 ②、生成路由文件文件中有路由的配置 ③、在 main.js 中引入路由 ④、页面的路由使用 四、路由的两种模式
1. Hash url 中带有# 默认
主要原理是通过监听#后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件然后通过获取 location.hash 得到当前的路径标
识符再进行一些路由跳转的操作。
路由 协议 地址 端口号 锚点
2. Historyurl 中没有#
路由 /XXX/XXX
五、路由的三个基本概念
①、route它是一条路由由这个英文单词也可以看出来它是单数
②、routes 是一组路由把上面的每一条路由组合起来形成一个数组
③、router 是一个机制相当于一个管理者它来管理路由 六、路由的传参取参
①、在配置路由时规定传参
routes[{path: ’/about/:id ’}]
router-link to ”/about/参数 ”
取参This.$route.params.id
②、通过传递参数
routes[{path: ’/about ’}]
router-link to ”/about/xxxxxxxxxxxx ”
取参this.$route.query.xxx
③、类似 get 的传参
:to ” {path: ’/about ’,query: {user: ’aaa ’}} ”
this.$route.query.xxx
④、类似 post 的传参
:to ” {name:
‘About ’,path: ’/about ’,query: {user: ’aaa ’}} ”
this.$route.query.xxx
地址栏没有数据必须加 name
七、路由的动态添加 返回上一页 this.$router.go(-1) 跳转指定页 this.$route.push(‘about ’) 八、路由守卫
定义路由时需要添加守卫也就是要加一些钩子函数。
beforeRouteEnter
beforeRouteLeava
to 到哪里去
form 从哪里来
next 方法 调用后才能下一步
九、子路由 Const routes[ { Path: ’/ ’, Name: ’Home ’, Component:Home, Children:[ { Path: ’/aaa ’, Name: ’Aaa ’, Component:Aaa } ] } ]
