Vue---路由的使用

最新推荐文章于 2024-09-05 16:15:02 发布

Laizhilizima

最新推荐文章于 2024-09-05 16:15:02 发布

阅读量337

点赞数 9

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/Laizhilizima/article/details/135705088

版权

什么是路由

后端路由：对于普通的网站，所有的超链接都是URL地址，

所有的URL地址都对应服务器上对应的资源

前端路由：对于单页面应用程序来说，

主要通过URL中的hash(#)来实现不同页面之间的切换

路由的使用

引入路由
创建路由实例
创建映射关系（路由对象）
挂载到vue实例上
预留展示区域

路由跳转：<router-link to='跳转的路径'></router-link>

路由重定向：redirect：'/......'（写哪个就跳转到哪个页面）

路由高亮：

router-link-active
自定义 linkActiveClass

路由嵌套：页面布局

在路由里面加一个children属性，是一个数据组，数组里面是路由对象，path里面不加“/”
在嵌套的父组件里面加上router-view标签

命名视图：布局一个路径对应多个组件，属性:components

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Laizhilizima

关注关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
Vue---路由的使用

路由跳转：命名视图：布局一个路径对应多个组件，属性components。主要通过URL中的hash(#)来实现不同页面之间的切换。所有的URL地址都对应服务器上对应的资源。
复制链接

扫一扫

Vue3 - 路由 Vue-router 4.X（配置与使用教程）

王佳斌

11-30

3739

vue3 路由官方文档，vue3 路由文档，vue-router4 官方文档，使用Vite构建Vue3项目,对路由Vue Router，Vue3中 Vue Router4路由的配置，vue3-vueRouter v4.x， vue3 中 vue-router4 基本使用(路由基本配置)，Vue3 - Router@4.x使用，vue-router4.x教程，Vue 3 中基于 vue-router 4 的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3) ，10分钟快速上手VueR

vue-element-admin中文版本

07-20

Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...

1 条评论您还未登录，请先登录后发表或查看评论

vue-router 路由超详细教程

weixin_47124112的博客

09-06

4万+

路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。

Vue基础知识总结 11：前端路由vue-router

学Java，找哪吒

10-13

4万+

当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

vue-router动态路由实践

Bennett_G博客

01-09

2万+

vue动态路由 vuex 路由数据(demo) 贡献本人于服务端约定的路由数据结构，仅供参考

VUE-CLI/VUE-ROUTER

LKS_010620的博客

08-24

4011

官方文档vue-cli是vue官方出品的快速构建单页应用的脚手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router。

路由vue-route的使用

python全栈

11-14

3343

{访问路由：http://localhost:8080/#/user/666UserView.vue组件。

Vue-Router动态路由

weixin_53874202的博客

03-04

5875

作用：动态拼接一些路径语法：/user/:userId(:XX表示可以动态拼接，路径可以渲染成/user/zhangsan或者/user/lisi等等) 1.通过router-link渲染的跳转页面通过动态绑定to属性后面跟着动态路由来跳转页面(:to="’/about/’+info") Router-Index.js import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const About

vue-router路由懒加载

longgege001的博客

10-11

1万+

vue-router路由懒加载实践，vue-router路由实现原理简单说明

vue-router 嵌套路由

m0_72694993的博客

09-09

4185

值得注意的是这里link标签中to属性的绑定，不能直接写我们定义时写的路径，因为子组件的路径会自动拼接父组件前边的路径，所以我们可以通过name进行绑定，或者可以通过写出完整路径进行绑定。在我们进行嵌套的路由里边，使用router-view添加路由，然后通过router-link进行绑定跳转的子路由。2.确定好之后，找到对应路由的文件，在指定的位置写入router-view标签。4.在其中添加children属性，绑定的是数组，数组里边定义新的子路由。最基础的路由嵌套就ok了。

vue-router 详解

最新发布

yunbabac的博客

09-05

271

vue3.5

Vue的状态管理——Vuex3&4&Pinia

警警的博客

08-30

2567

Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。

vue3使用-watch监听总结

weixin_44072254的博客

09-01

525

{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'，如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。

开发适合el-dialog的拉伸拖拽自定义指令和适配自定义的图片查看组件

鹤渺的星球

09-05

792

我之前有开发过一个图片查看的组件，这个组件可在单页面打开，也可以在弹窗里打开，但是弹窗因为是比较固定，所以有一些局限性，只能拖拽，不能改变弹窗大小，于是有了开发【可以拖拽改变大小的弹窗】组件。通过自定义指令，实现弹窗的移动拖拽拉伸等功能动态计算弹窗的位置与尺寸，因为弹窗的位置和尺寸是动态计算的，涉及到鼠标的实时位置和弹窗初始位置之间的关系。代码也贴上去了，仅供参考。

Vue-router动态路由详解与实战应用

动态路由的核心在于使用路径参数，允许在路由配置中定义多个可变部分，这些变量的值会在实际路由匹配时存储在$route.params对象中。官方文档对动态路由的解释是，你可以为路由设置路径参数，这些参数会被解析并在...