Vue-Router的使用详解

最新推荐文章于 2024-06-18 14:43:44 发布
最新推荐文章于 2024-06-18 14:43:44 发布
阅读量772 收藏 10
点赞数 6
分类专栏： Vue2&Vue3 文章标签： vue-router 前端渲染 前端路由 vue路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47529373/article/details/118547646
版权
本文详细介绍了Vue-Router的使用，包括认识路由、基本使用、动态路由、路由懒加载、路由嵌套、路由守卫等内容。重点讲解了前端渲染与前端路由的概念，以及如何配置和操作路由，如使用router-link和router-view，动态添加和删除路由，以及应用路由守卫进行页面跳转控制。
摘要由CSDN通过智能技术生成

Vue-Router的使用详解

认识路由

渲染 & 路由

后端渲染 & 前端渲染

  • 后端渲染：在浏览器内输入地址，浏览器就可以展示一个页面，而页面内容展示的数据在后台服务器那边就已经渲染好了，浏览器只需要对返回的HTML做一个渲染就行了。
  • 前端渲染：在浏览器内输入地址，浏览器返回的是一些静态资源文件，内容里面的数据，由浏览器执行脚本，向服务器发送请求，浏览器拿到数据后，浏览器再渲染的页面上。

后端路由 & 前端路由

  • 后端路由：URL(唯一资源地址符)，一个URL对应一个页面，浏览器地址栏的地址由服务器(后端)来处理URL和页面之间的映射关系。
  • 前端路由：URL和页面之间的映射关系由前端来处理。

URL的hash & HTML5的History

URL的hash

  • url的hash(锚点 # )：URL地址 # 后面的东西。
  • 改变hash不会引起页面的刷新，因为：hash会出现在url内，但是不会出现在HTTP请求中。
  • 点击浏览器页面刷新，会重新请求资源。

H

了解本专栏 订阅专栏 解锁全文 超级会员免费看
独鹿DT
关注
  • 6
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
订阅专栏
【vue-router源码】十二、useRoute、useRouter、useLink源码分析
MAXLZ的博客
06-13 1965
【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。该篇文章将分析useRoute、useRouter、useLink的实现。
vue vue3.x中vue-router
weixin_43294560的博客
02-14 701
import { useRouter, useRoute } from 'vue-router' import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router' import { RouterLink, useLink } from 'vue-router' 1、setup访问$router和$route export default { setup() { const router = useRouter()
vue3中路由的两种引进方式（router 和 useRouter)进行页面跳转
最新发布
蓝精灵的博客
06-18 548
适用于vue3和vue2版本，可以使用在任意文件中（js文件和vue文件）在vue3中，使用在组件的带setup属性的script标签内。
【Vue Router】017-扩展 RouterLink*
訾博（ZiBo）的博客
01-03 468
1.17 扩展 RouterLink* 1.17.1 概述 RouterLink 组件提供了足够的 props 来满足大多数基本应用程序的需求，但它并未尝试涵盖所有可能的用例，在某些高级情况下，你可能会发现自己使用了 v-slot。在大多数中型到大型应用程序中，值得创建一个（如果不是多个）自定义 RouterLink 组件，以在整个应用程序中重用它们。例如导航菜单中的链接，处理外部链接，添加 inactive-class 等。 1.17.2 扩展 RouterLink 让我们扩展 RouterLink 来
vue路由vue-router详解
局外人LZ的博客
04-01 883
Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用程序（SPA）。它允许你在 Vue 应用中实现客户端端的路由功能，通过管理应用的不同视图之间的导航和状态。以下是 Vue Router 的一些主要特点和功能：1.声明式路由配置：Vue Router 允许你使用声明式的方式定义应用的路由规则，将路径映射到组件。2.嵌套路由：你可以定义嵌套路由，使得不同级别的路由可以对应不同的组件，从而构建复杂的页面结构。
vue-router 如何实现支持外部链接
Five—菜鸟级的博客
04-18 8364
vue-router 扩展 自动跳转外链
vue-router 中 meta的用法详解
01-21
在使用Vue.js框架开发单页面应用（SPA）时，经常会利用vue-router插件来管理页面的路由。在vue-router中，meta字段是路由对象的一个属性，用于添加自定义信息，比如权限控制、页面标题等。下面将详细介绍meta的用法...
vue-router 起步步骤详解
10-17
我们首先需要从 vue-router 包中导入 VueRouter 对象，然后导入我们需要路由的组件。在 Vue 项目中，main.js 通常是应用的入口文件，我们在这里进行各种初始化配置。 ```javascript import VueRouter from 'vue-...
Vue.js路由组件vue-router使用方法详解
12-29
使用Vue.js + vue-router 创建单页应用是非常简单的。只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染即可。 一、普通方式基本例子： <!DOCTYPE html> <html lang=en> <head> <...
vue-router实现tab标签页（单页面）详解
08-29
Vue Router 实现 Tab 标签页（单页面）详解 Vue Router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把...
十四、使用 Vue Router 开发单页应用（5）
走在bug的路上
12-10 1121
● 数据获取 ● Vue Roter 与组合 API ○ 在 setup() 函数中访问 Router 和当前路由 ○ 导航守卫 ○ useLink ● 滚动行为
Vue3 中 router 带来了哪些变化？
小生方勤
05-11 3373
作者:Leiyhttps://segmentfault.com/a/1190000022582928前言Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的...
vue的路由配置，router-link的使用
夭桃鸣鹿的博客
12-31 4135
在vue项目中使用router-link实现路由的跳转。 新建vue组件（在项目中建立以vue结尾的文件） 我在components文件下新建了home.vue和login.vue两个文件，两个文件中随便写点什么，有区别就行。 在index.js（router文件夹下的）配置路由信息 import Vue from 'vue' import Router from 'vue-route...
vue引入link_Vue教程(路由router-基本使用)
weixin_39813009的博客
11-13 3767
本文开始我们来给大家介绍在Vue中非常重要的一个内容，就是路由Router什么是路由后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应...
Vue-router学习01_路由基本配置，router-link相关以及动态路由实现
m0_46725128的博客
03-18 404
router基本配置 在用CLI4创建项目时选上router的选项，可自动在src文件夹下创建router文件夹，里面有index.js文件，保存着路由相关的配置 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ // routes保存着路径和组件之间的映射联系
如何使用router-link对象方式传递参数？
liubangbo的专栏
10-28 923
文章转自：https://blog.csdn.net/qq_35393869/article/details/80251099 如何使用router-link对象方式传递参数？ 疑问：（判断和传参） 点击导航栏目，js如何判断自己点击的是哪个具体栏目？ 它们是如何传参的？ 如何使用params，携带查询参数？ 效果图解说： A. 点击选择【屈原“查看详情”】之前 B. 点击选择【屈原“查看详情”】之后 要点总结： 在vue-router中，有两大对象被挂载到了实例this；$
Vue提高篇二：使用vue-router实现静态路由
我的博客
10-14 3726
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 文章目录系列文章目录一、背景二、vue-router2.1 使用方式2.2 路由类型 一、背景 传统的WEB项目大多使用多页面结构，需要切换内容的时候
vue router-view使用详解
09-13
Vue Router 是 Vue.js 的官方路由管理器，它与 Vue.js 紧密集成，可以让我们轻松地构建单页面应用（SPA）。 在使用 Vue Router 构建单页面应用时，我们通常会使用 `<router-view>` 组件来展示当前路由所对应的组件内容。下面是对 `<router-view>` 组件的使用详解： 1. 定义路由： 在 Vue Router 中，我们需要首先定义路由。可以通过在 `routes` 配置项中定义一个数组来实现，每个路由对象都包含了一个路径和对应的组件。例如： ```javascript import Home from './components/Home.vue' import About from './components/About.vue' const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] ``` 2. 注册路由： 在创建 Vue 实例之前，我们需要将路由配置注册到 Vue 实例中。可以使用 `Vue.use()` 方法来注册 Vue Router 插件。例如： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 3. 创建路由实例： 在注册完插件后，我们可以创建一个路由实例，并将之前定义的路由配置传入。例如： ```javascript const router = new VueRouter({ routes }) ``` 4. 添加路由占位符： 在应用的根组件中，我们需要添加一个 `<router-view>` 组件作为路由占位符。这样，当路由切换时，对应的组件就会渲染在这个占位符中。例如： ```html <template> <div> <router-view></router-view> </div> </template> ``` 注意，`<router-view>` 组件可以放置在任何位置，根据实际需求进行布局。 5. 挂载路由： 最后一步是将路由实例挂载到 Vue 实例上。例如： ```javascript new Vue({ router }).$mount('#app') ``` 至此，我们就完成了 `<router-view>` 组件的使用。当用户访问不同的路由时，对应的组件就会被渲染到 `<router-view>` 中，实现了页面的切换效果。 需要注意的是，`<router-view>` 组件只能用于展示路由对应的组件内容，并不能直接显示其他内容。如果需要在路由切换时显示一些其他元素，可以结合使用 `<router-link>` 组件来实现。 希望以上解答对你有帮助！如有其他问题，请随时提问。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值