vue中路由的使用

最新推荐文章于 2024-07-12 14:10:05 发布
最新推荐文章于 2024-07-12 14:10:05 发布
阅读量130 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63757502/article/details/137723578
版权
本文详细介绍了Vue中的路由概念，包括后端路由与前端路由的区别，以及如何通过hash在单页应用中实现组件切换。讲解了Vue路由的引入、实例化、映射关系设置和实际使用方法，以及涉及的样式隔离和声明文件类型。
摘要由CSDN通过智能技术生成

vue中路由的使用

什么是路由？

1、后端路由：每个url地址都对应着不同的静态资源。
2、前端路由：对于单页面应用程序来说，主要通过hash（#号）来实现不同组件（页面）之间的切换。
3、hash特点：http请求不会包含hash（#号）相关内容，所以单页面程序主要用hash跳转。

如何使用路由

1、引入路由
2、创建路由实例
3、创建映射关系
路由对象（path：“路由地址”，component：组件）
4、挂载到vue实例上
5、预留展示区

使用（路由跳转 to=“跳转路径”）

使用router-link进行页面之间的跳转

style

1、样式隔离：scoped
2、声明文件类型：lang

可爱de蓝胖子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue中路由的使用详解
11-30
vue中路由的使用详解，喂到嘴里的教程
Vue中路由实现后台管理系统
05-15
Vue中路由实现一个简单的后台管理系统，数据都是固定的，没有用到数据库，主要是练习路由的使用，有需要的拿去练习
vue中路由验证和相应拦截的使用详解
11-26
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { user: false }, mutations: { // 登录 login (state, user) { state.user = user }, // 退出 ...
vue中路由vue-router的使用和生命周期
01-06
vue-router的使用 1.在项目src文件夹下新建名为router的文件夹 2.在router文件夹下新建index.js 编程式 router.push(...) 1.通过query传参 query传参会把参数显示在地址栏，类似于get传参，但是如果网页刷新参数...
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1206
vue切换主题
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1409
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
Vue和Element UI 路由跳转，侧边导航的路由跳转，侧边栏拖拽
爱敲代码的卡拉米的博客
07-12 304
项目中用到了点击侧边栏的跳转，所以记录下来，方便有需要的人用到~是通过重定向定位到登陆页的，然后通过登陆页跳转到主页。首先看布局，因为我的用于页面显示的。
vue 自定义滚动条同步拖动（移动端）
最新发布
u014206461的博客
07-12 159
vue 自定义滚动条同步拖动（移动端）
CSS特效：pointer-events: none；的一种特殊应用
q1003675852的博客
07-11 489
本文记录了pointer-events: none;的一种特殊应用，既能显示模糊渐变的同时还能保持元素可点击的效果。
vue vite+three在线编辑模型导入导出
regretTAT的博客
07-10 501
要实现一个类似于数字孪生的场景 可以在线、新增、删除模型 、以及编辑模型的颜色、长宽高 然后还要实现 编辑完后 保存为json数据 记录模型数据 既可以导入也可以导出
vue3 路由跳转新页面并传递参数与获取参数
Anlittlecat的博客
07-10 354
parmas的形式传参需在路由处定义。
Vue.js学习笔记（五）抽奖组件封装——转盘抽奖
summer_gf的博客
07-11 413
动态配置转盘组件开发，只需要改动数据，就自动生成转盘，减少UI和前端的工作量。
【区分vue2和vue3下的element UI Carousel 走马灯组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
07-12 924
在 Vue 2 中，我们通常使用 Element UI，而在 Vue 3 中，我们则使用 Element Plus 作为其替代品。对于 Carousel 走马灯组件，这两个库提供了相似的功能，但在 Vue 2 和 Vue 3 的上下文中，它们的属性、事件和方法可能会有所不同。以下将分别介绍 Vue 2 下的 Element UI Carousel 和 Vue 3 下的 Element Plus Carousel 的属性、事件和方法，并给出示例。属性（Props）height: 走马灯的高度。
vue 搭建 pinia
淼淼不暴躁!
07-11 440
作用：简单来说（有了一个新的存储数据和方法的空间）中的数据，需要经过处理后再使用时，可以使用。此时开发者工具中已经有了。的实体，每个组件都可以。
2024前端面试真题【Vue2 + Vue3篇】
Leatitia的博客
07-10 682
注册指令的方式directive属性配置自定义指令的钩子函数：指定第一次绑定到元素时调用，用于初始化配置等；：被绑定元素插入到父节点时调用；：所在组件Vnode更新时调用，可能发生在其子Vnode更新之前：指令所在Vnode及其子Vnode全部更新后调用；：只调用一次，指令与元素解绑时el：绑定的元素；binding：对象，包含：name、value、argvnodeoldVnode示例：防止表单重复提交if(!
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 463
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
硅谷甄选4（项目主体）
qq_47296476的博客
07-12 674
修改使用规则rules使用自己编写的函数作为规则校验。//定义表单校验需要的配置对象//规则对象属性:/* {required: true, // required,代表这个字段务必要校验的min: 5, //min:文本长度至少多少位max: 10, // max:文本长度最多多少位message: '长度应为6-10位', // message:错误的提示信息。
vue 级联下拉框选择的思维
reembarkation的博客
07-10 245
vue 级联下拉框选择的思维
el-from中校验，如果某一项需要另一项填写才能校验
m0_61265297的博客
07-10 301
使用validateField。
vue中路由的实现方式
03-28
Vue中路由的实现方式有两种：hash模式和history模式。 1. hash模式 在hash模式下，路由信息会保存在URL的hash中，以#号开头。例如：http://localhost:8080/#/home。Vue Router会监听URL的变化，当URL的hash发生变化时，会根据新的hash值切换到对应的组件。 2. history模式 在history模式下，路由信息会保存在浏览器的历史记录中。例如：http://localhost:8080/home。Vue Router会使用HTML5的History API来实现路由切换。在history模式下，URL中不再需要#号，看起来更加清晰。 在Vue中使用路由，需要引入Vue Router，然后定义路由规则和对应的组件。最后在Vue实例中挂载Vue Router。 例如： ``` import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import About from '@/components/About' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] }) ``` 这里定义了两个路由规则，一个是/，对应的组件是Home，另一个是/about，对应的组件是About。最后在Vue实例中挂载Vue Router。 例如： ``` import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app') ``` 在模板中使用路由链接和路由视图，例如： ``` <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值