路由使用方法
导入插件
import {useRouter} from "vue-router"
创建路由
let router = useRouter()
路由传递
两种书写格式
通过调用事件调用路由
const toDetail = (id)=>{
router.push({ path: "/detail",query:{id:id}})
// router.push("/detail?id="+id)
}
路由一般搭配route来使用
引入
import {useRoute} from "vue-router"
创建route对象
let route = useRoute()
创建函数
使用route接收router传入的参数
let findArticleById = async () => {
let id = route.query.id
let result = await getArticleById(id)
article.value = result.data
}
路由与发送请求有什么区别
跳转页面是否需要参数,如果需要参数,则使用路由。不需要参数则使用< a></ a>标签跳转
使用路由和发送请求是在不同的上下文中使用的,并且有着不同的目的和用途。
使用路由:
当我们构建前端应用程序时,通常会使用路由来管理页面之间的导航和显示。这种情况下,路由的作用是根据URL的变化,加载和显示不同的页面内容,以提供单页应用程序(SPA)的用户体验。通过路由,用户可以直接访问特定的页面,而无需刷新整个页面。一些常见的JavaScript路由库包括React Router、Vue Router等。
使用路由的主要场景包括:
导航:根据URL的变化,在前端应用程序中进行页面之间的导航。
嵌套页面:通过嵌套路由,实现在一个页面中加载其他子页面,以创建复杂的应用程序结构。
参数传递:从URL中获取参数,并将其传递给相应的页面以显示相关内容。
发送请求:
发送请求通常发生在客户端与服务器之间的交互过程中,目的是从服务器获取数据或向服务器发送数据。这涉及到使用HTTP协议发送请求(例如GET、POST、PUT、DELETE等),并接收来自服务器的响应。发送请求的常见场景包括前后端交互、数据获取和更新等。
发送请求的主要场景包括:
数据获取:从服务器获取数据,例如获取用户信息、获取产品列表等。
数据更新:向服务器发送数据以更新后端数据库的内容,例如创建新的记录、更新现有记录等。
区别:
使用路由主要是为了改变前端应用程序中所显示的页面内容,以提供更好的用户导航和交互体验。而发送请求则是为了与服务器进行数据交换,从服务器获取数据或将数据发送到服务器。
简而言之,使用路由时,我们在前端应用程序内部切换页面,不涉及与服务器的直接交互;而发送请求时,我们与服务器进行通信,以获取/更新数据。两者的目的和用途是不同的,但它们在构建现代Web应用程序中都是非常重要的组成部分。
刷新之后路由跳转的页面无法正常显示
在大多数情况下,路由传参只能在页面之间进行一次传递。当刷新页面时,浏览器会重新加载整个页面,包括重新执行JavaScript代码,这导致之前传递的参数被重置或丢失。
这是因为在单页应用程序(SPA)中,页面的变化是通过JavaScript和DOM操作来实现的,而不是通过传统的服务器端渲染和刷新页面。在SPA中,路由库通常使用浏览器的History API或URL hash来管理URL的变化,并根据URL的变化加载和显示不同的页面内容。
当我们从一个页面切换到另一个页面时,可以通过路由传递参数。例如,使用URL的查询字符串部分或路径参数来携带参数信息。但是,当我们刷新页面时,浏览器会重新加载整个页面,URL参数将被重置为默认值,并且之前传递的参数信息将丢失。
要解决这个问题,可以考虑以下几种方法:
使用持久化存储:将参数信息保存在浏览器的本地存储(如localStorage或sessionStorage)中。在页面加载时,可以从存储中获取参数值并恢复页面状态。
使用后端存储:将参数信息保存在服务器端,例如使用数据库或会话存储。在页面加载时,可以通过向服务器发送请求来获取参数值。
URL编码:将参数信息编码为URL的一部分,例如查询字符串或路径参数。然后,当页面刷新时,可以解析URL以获取参数值并恢复页面状态。
总之,由于刷新会重新加载整个页面,导致之前传递的参数丢失,因此需要使用其他方法来保存和恢复参数信息。这些方法可能涉及浏览器本地存储、服务器端存储或URL编码等技术。选择哪种方法取决于具体的需求和应用程序的架构。
跳转文章详情
路由
detail中的javascript
article文章函数
getArticleById sql语句
atticle接收信息
将入v-html标签
pinia
将pinia引入main.js
toDetail中的代码
findArticleById中pinia的写法
用户登录
登录controller
发布文章时补充
检测登录
后台代码
查询文章列表信息&文章新增页面
时区显示错误
在 User类中 添加注释
分类功能添加分页插件
pom.xml添加插件
yml配置中添加