4.页面路由怎么开发

已于 2024-08-23 23:03:45 修改
阅读量378 收藏
点赞数 9
分类专栏： Vue 从0开始做一个前后端分离项目 文章标签： 前端
于 2024-07-31 16:42:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55121347/article/details/140821400
版权

注意App.Vue的删除注意事项

里面的不能删除

首先删除它自带的页面

新建页面

Composition API 和 Options API 是 Vue.js 中两种不同的组件写法风格，它们用于定义 Vue 组件的结构和逻辑。我用的是Options API

配置路由

将它修改为需要的,按照上面的写法

 如果component里面已经加了那么就不需要在上面加这是一种懒加载的方式

最后启动项目,输入对应的地址

成功了

努力学习的小宇同学
关注
  • 9
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发： 路由跳转页面详解
软贱开发攻城狮
02-07 4107
在前端开发的时候，路由跳转是非常经典的知识点之一，对于刚入门的开发者来说，可能会一知半解，那么本篇博文就来分享一下前端开发过程中路由跳转的使用，以及在路由跳转中可能会遇到的问题和注意事项，该知识点比较基础，技术大牛就不要进来看了，只分享给有需要的人。 先来分享路由实现页面跳转的方式：方法一：通过JS实现页面跳转，方法二：通过<router-link>实现页面跳转。 方法一：通过JS实现页面跳转的方法 1、首先在template模块里面实现需要跳转的地方，如: <button cla
HTML页面使用路由
qq_42024058的博客
09-06 5705
传统的Web应用程序不同的页面之间跳转都是向服务器发起请求，服务器处理请求后向浏览器推送页面，在单页应用程序中，不同视图(组件的模板)的内容都是在同一个页面中渲染，页面间的跳转都是在浏览器端完成，这就用到了前端路由。本文介绍如何配置前端路由。 在开始之前你需要在终端输入以下代码来安装Vue Router npm install vue-router 一.设置导航链接 使用router-link组件设置导航链接。to属性指定链接的URL， < router-view >默认会被渲染为一个&.
Vue2.路由
切图仔
04-27 3980
前端路由（Hash 地址与组件之间的对应关系） SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。 此时，不同组件之间的切换需要通过前端路由来实现。 结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！ 1.前端路由的工作方式 ① 用户点击了页面上的路由链接 ② 导致了 URL 地址栏中的 Hash 值发生了变化 ③ 前端路由监听了到 Hash 地址的变化 ④ 前端路由把当前 Hash 地址对应的组
vue3.0使用vue-router4.x配置路由* 404页面，控制台报错
技术前端，忠于热爱 @回忆哆啦没有A梦
12-31 2744
vue3.0使用vue-router4.x配置路由* 404页面，控制台报错:Error: Catch all routes ("*") must now be defined using a param with a custom regexp.
Nuxt.js路由重定向
彭世瑜的博客
05-26 4107
<template> <div></div> </template> <script> export default { asyncData({ redirect }) { redirect('/path/to') } } </script> 参考 在nuxt中使用路由重定向
提升page.js路由效率的几个方法
甘焕的博客
11-18 5883
1. 必须启动路由服务注册完路径后，必须要启动路由服务，才能监听浏览器地址变化，如下：page.base("/baseUrl/") page("exit", function() { alert('exit') }) // 必须执行，才能监听浏览器地址的变化 page.start()2. 动态注册路由地址在page.js手动启动路由服务后，还支持继续注册动态路由，这在权限验证中作用非常突出
uniapp页面路由传参
weixin_50501118的博客
05-10 3210
uniapp页面路由传
nuxt.js路由守卫拦截
ZhuAiQuan的博客
03-30 7107
虽然nextjs不需要写路由，但出于安全可以写路由守卫来拦截某些跳转。 首先在plugins新建一个路由文件，比如router.js 然后写好你的拦截条件比如验证token之类的 export default ({ app, store }) => { app.router.beforeEach((to, from, next) => { // 设置条件 console....
angular.js路由页面缓存问题
天空影
12-08 3177
angular路由跳转页面缓存问题
Vue3.Router路由的使用
立场简单的博客
01-10 8999
vue3和vue2路由基础部分变动不大，基础详情查看，该篇是针对之前的文章进行补充。vue2router基础。 1. router-link 属性 属性 描述 to 要跳转的路由 replace 设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()； active-class 设置激活a元素后应用的class，默认是router-link-active exact-active-class 链接精准激活时，应用于渲
微信小程序页面路由原理.pdf
07-01
小程序的开发涉及诸多细节，其中页面路由管理是小程序框架的一个核心组成部分。页面路由涉及到页面跳转和页面栈管理等技术，对页面栈的理解有助于开发者更好地掌握小程序的开发。 页面栈是一种采用栈结构来维护小...
uni-app之pages.json 页面路由.pdf
08-16
uni-app之pages.json 页面路由
js和微信小程序路由（页面）跳转拦截
03-29
在开发有登录功能的项目时，不可避免的需要在路由（页面）跳转时对当前用户的权限进行一定的校验。目前我使用的比较多的vue.js提供了比较好的解决方案。在开发微信小程序时，发现官方目前并未提供相应的解决方案，...
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 480
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
关于前端服务器字体的引用
qq_69304031的博客
09-02 458
服务器字体是一种强大的工具，可以帮助我们实现全场景字体风格的统一。通过定义服务器字体，我们可以确保网页在不同的设备和浏览器上都能呈现出一致的字体效果，提升用户体验和品牌形象。在使用服务器字体时，需要注意字体文件的版权问题，并确保字体文件的加载速度不会影响网页的性能。希望这篇博客对你在网页设计中使用服务器字体有所帮助。如果你有任何问题或建议，欢迎在评论区留言。
js对象操作常用方法
m0_75276704的博客
09-02 572
2.构造函数创建 2.方括号 三、添加属性 四、删除属性 五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法 六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝 八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
cdcdhj的博客
09-01 573
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
深入理解JavaScript闭包：避免常见的内存泄漏问题
官方推荐
09-02 4375
深入理解JavaScript闭包：避免常见的内存泄漏问题
WHAT - React 函数与 useMemo vs useCallback
最新发布
weixin_58540586的博客
09-03 817
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
Angular 4.x 路由快速入门与实践指南
本文档旨在引导读者快速入门学习Angular 4.x版本的路由系统，强调了路由在Angular应用中的核心地位，即通过管理不同的路由来展示不同的页面内容和获取相关数据。以下是本文的主要知识点： 1. **安装Angular Router*...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值