vue简易路由的原理

最新推荐文章于 2024-10-18 15:58:53 发布

与鱼有约

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量89

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_62273193/article/details/130537444

版权

文章介绍了如何在Vue.js中利用动态组件绑定、自定义路由规则和浏览器的历史API（history.pushState及onpopstate事件）来实现在页面前进后退时组件相应变化的功能。

摘要由CSDN通过智能技术生成

需要实现两个功能

1、路径变化组件跟着变化

2、浏览器可以前进后退，组件变化

关键点：

1、vue 内置的动态组件 绑定 is 属性绑定组件名称

2、自定义路由规则，让url和组件名称一一对应

3、使用history.pushState(),第三个参数让url改变，同时改变url对象的组件名称

4、window.onpopstate(),点击浏览器的前进按钮/后退按钮触发的事件，获取到loction.pathname 来改变组件名称

代码参考如下：

<script setup lang="ts">
// url 变化 组件变化
// 前进后退 组件变化

import HomeVue from './views/components/HomeVue.vue'
import LoginVue from './views/components/LoginVue.vue'
import UserVue from './views/components/HomeVue.vue'
import { shallowRef } from 'vue'
const routes = [
  { path: '/home', component: HomeVue },
  { path: '/login', component: LoginVue },
  { path: '/user', component: UserVue }
]
const currentPage = shallowRef()
const push = (url: string) => {
  // console.log(url)
  history.pushState(null, '', url)
  currentPage.value = routes.find((item) => item.path === url)?.component
}
window.onpopstate = () => {
  // console.log(location.pathname)
  currentPage.value = routes.find(
    (item) => item.path === location.pathname
  )?.component
}
</script>

<template>
  <div>APP组件</div>
  <div>
    <button @click="push('/home')">首页</button>
    <button @click="push('/login')">登录</button>
    <button @click="push('/user')">个人中心</button>
  </div>
  <component :is="currentPage"></component>
</template>