成都微信端网站建,广告设计制作税率,技术研发流程的六个阶段,做网站王仁杰如果您有疑问#xff0c;请观看视频教程《Vue3实战教程》 路由
客户端 vs. 服务端路由
服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时#xff0c;浏览器会从服务端获得全新的 HTML…如果您有疑问请观看视频教程《Vue3实战教程》 路由
客户端 vs. 服务端路由
服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时浏览器会从服务端获得全新的 HTML然后重新加载整个页面。
然而在单页面应用中客户端的 JavaScript 可以拦截页面的跳转请求动态获取新的数据然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验尤其是在更偏向“应用”的场景下因为这类场景下用户通常会在很长的一段时间中做出多次交互。
在这类单页应用中“路由”是在客户端执行的。一个客户端路由器的职责就是利用诸如 History API 或是 hashchange 事件这样的浏览器 API 来管理应用当前应该渲染的视图。
官方路由
在 Vue School 上观看免费的视频课程
Vue 很适合用来构建单页面应用。对于大多数此类应用都推荐使用官方支持的路由库。要了解更多细节请查看 Vue Router 的文档。
从头开始实现一个简单的路由
如果你只需要一个简单的页面路由而不想为此引入一整个路由库你可以通过动态组件的方式监听浏览器 hashchange 事件或使用 History API 来更新当前组件。
下面是一个简单的例子
vue
script setup
import { ref, computed } from vue
import Home from ./Home.vue
import About from ./About.vue
import NotFound from ./NotFound.vue
const routes {/: Home,/about: About
}
const currentPath ref(window.location.hash)
window.addEventListener(hashchange, () {currentPath.value window.location.hash
})
const currentView computed(() {return routes[currentPath.value.slice(1) || /] || NotFound
})
/script
templatea href#/Home/a |a href#/aboutAbout/a |a href#/non-existent-pathBroken Link/acomponent :iscurrentView /
/template
在演练场中尝试一下
