2025年07月21日

史上最全 vue-router 讲解 !!!（vue $route $router）

前端路由前端路由是后来发展到SPA（单页应用）时才出现的概念。 SPA 就是一个WEB项目只有一个 HTML 页面，一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转。前端路由在SPA项目中是必不可少的，页面的跳转、刷新都与路由有关，通过不同的url显示相应的页面。优点：前后端的彻底分离，不刷新页面，用户体验较好，页面持久性较好。后端路由当在地址栏切换不同的url时，都会向服务器发送一个请求，服务器接收并响应这个请求，在服务端拼接好html文件返回给页面来展示。优点：减轻了前端的压力，html都由后端拼接；缺点：依赖于网络，网速慢，用户体验很差，项目比较庞大时，服务器端压力较大，不能在地址栏输入指定的url访问相应的模块，前后端不分离。路由模式前端路由实现起来其实很简单，本质是监听 URL 的变化，然后匹配路由规则，在不刷新的情况下显示相应的页面。 hash模式（对应HashHistory）

2025年07月21日

VUE 项目中使用iframe及传值（vue引入iframe配置html）

最近做了一个这样的业务处理，在uniapp 项目中使用第三方页面，需要在当前的页面中把一些数据传给第三方，第三方处理后返回一些数据给当前页面，后续其他的操作会用到当前的数据。

当前页面-发送数据(iframe页面）

iframe 包括第三方地址把需要传递的数据拼接到url 地址

2025年07月21日

VUE - 如何写一个简易版 vue-router 插件

在vue2中 vue-router 通过插件的形式进行工作，回顾下具体操作步骤如下：

在router文件中

// 在router文件中引入 
import Router from 'vue-router'
// 使用Router
Vue.use(Router)
    
let routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  {
    path: '/test',
    name: 'test',
    component: test
  }
];
// 导出Router对象
export default new Router({
  routes: routes,
  mode: 'hash',
})


在main.js中使用router对象
import router from './router'
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2025年07月21日