Vue路由简介

最新推荐文章于 2022-09-17 16:35:43 发布
最新推荐文章于 2022-09-17 16:35:43 发布
阅读量125 收藏
点赞数
分类专栏： vue路由 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dapaoshinidie/article/details/101566719
版权

什么是路由

1.后端路由：对于普通的网站，所有的超链接都是url地址，所有的url地址都对应服务器上对应的资源

2.前端路由：对于单页面应用程序，主要通过url中的hash(#号)来实现不同页面之间的切换

hash的特点：HTTP请求中不会包括hash相关的内容

 

在单页面应用程序中，通过hash来切换页面的方式，叫做前端路由

执梦起航
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue路由基本介绍
qq_45335911的博客
08-21 878
1.路由的基本概念与原理 1.1路由 路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 路由分为：前端路由 后端路由 1.后端路由 概念：根据不同用户的URL请求，返回不同的内容 本质：URL请求地址与服务器资源之间的对应关系 （2）.SPA 1.后端渲染(存在性能问题) 2.Ajax前端渲染(前端渲染提高性能，但是不支持浏览器的前进后退操作) 3.SPA(Single Page APPlication)单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实
vue的路由的简介
weixin_45816830的博客
04-14 548
一、要区分后端路由与前端路由 后端路由：应用程序如何去处理不同的url地址发送过来的请求。 POST localhost:3000/api/login GET localhost:3000/list 前端路由：不同的url地址要渲染不同的页面效果出来 1.1 GET localhost:8080/index.html 1.2 GET localhos...
vue路由介绍
言凡的博客
08-12 5214
前端路由 服务器端路由：的功能是根据URL地址，跳转到相应页面，这些页面都是真实存在于服务端的 前端路由：由前端实现以上功能，前端只存在d单页面首页index.htm 优点 不需要每次都从服务器获取，渲染页面更快速 缺点 不利于SEO 使用浏览器前进、后退按键时重新发送请求，未合理利用缓存 单页面无法记住之前滚动的位置 前端路由的使用 vue-router用...
vue路由案例详解
张木期的博客
09-27 3530
1.能够说出什么是路由 2.能够说出前端路由的实现原理 3.能够使用Vue-Router实现前端路由 4.能够实现嵌套路由，动态路由 5.能够实现命名路由以及编程式导航 6.理解并实现后台管理案例 1.路由的概念 路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系，就是路由。 路由分为前端路由和后端路由 1).后端路由是由服务器端进行实现，并完成资源的分发 2).前端路由是依靠hash
vue路由的基础介绍
王依米
10-02 205
Vue路由demo
08-03
Vue路由（Vue Router）是官方提供的强大路由管理器，它允许我们实现单页面应用（SPA）中的页面导航和状态管理。在Vue项目中，路由扮演着至关重要的角色，它帮助我们定义页面之间的跳转，并处理与这些跳转相关的数据...
vue路由分文件拆分管理详解
01-19
这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那么是拆分是非常没必要的。...
详解vue路由
11-19
Vue路由，作为Vue.js应用的重要组成部分，主要用于管理单页面应用程序(SPA)中的页面导航和状态。Vue Router是Vue.js官方的路由管理器，它通过监听URL的变化，动态地渲染对应的组件，实现页面间的平滑过渡。 **前端...
vue路由文件
04-25
Vue Router是Vue.js官方支持的路由管理器，用于处理单页面应用（SPA）的导航和页面间通信。在Vue项目中，路由扮演着至关重要的角色，它允许我们根据URL来动态加载和切换不同的组件，实现页面间的平滑过渡。 Vue ...
vue 路由对象属性
01-07
更多路由属性查看官网 this.$route.path 类型: string 字符串，对应当前路由的路径，总是解析为绝对路径，如 /foo/bar。 this.$route.params 类型: Object 一个 key/value 对象，包含了动态片段和全匹配片段，...
VueRouter学习笔记
泊一的博客
12-05 330
文章目录1.路由的基本概念与原理1.1 路由1. 后端路由2. SPA（Single Page Application）3.前端路由 1.路由的基本概念与原理 1.1 路由 路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 在开发中，路由分为： 后端路由 前端路由 1. 后端路由 概念：根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系 ...
vue路由的介绍
weixin_46191846的博客
09-15 127
路由原理 传统开发方式 url改变后 立刻发起请求，响应整个页面，渲染整个页面 SPA 锚点值改变后 不会发起请求,发起ajax请求,局部改变页面数据 页面不跳转 用户体验更好 SPA single page application(单页应用程序) 前端路由 锚点值监视 ajax获取动态数据 核心点是锚点值 前端框架 Vue/angular/react都很适合开发单页应用 基本使用 vue-router 其是vue的核心插件 1:下载 npm i vue-router -S 1.2(重要):安装插件Vue.
vue中的路由介绍
菜鸟搬砖记
08-23 850
1. this.router和this.router 和 this.router和this.route区别 this.$router: 访问路由器，即整个项目的路由 this.$route: 访问当前路由 2. router-link 和 router-view vue路由是通过组件映射到路由中去，在router.js文件中配置相应的组件对应，如下： // 1. 定义 (路由) 组件。 // 可以...
前端学习（2170）：路由的默认值和修改为history模式
歌谣的博客
09-14 290
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>learnvuerouter</title> </head> <body> &..
VUE路由介绍
weixin_46517461的博客
09-17 1499
Vue路由原理
Vue路由简单介绍（一）
qq_46469137的博客
07-29 521
什么是路由（route） 后端路由：对于普通的网站，所有的超链接都是URL地址，所有URL地址都对应服务器上的相关资源，后端路由的工作就是将URL地址和服务器上的资源进行匹配。 前端路由：对于单页面应用程序来说，主要通过URL中的hash（#号，就相当于锚链接中的锚点）来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容（也就是说https://www.baidu.com#/login中‘#’后面的内容在请求中都会被忽略），所以，单页面程序中的页面跳转主要用hash
言简意赅的vue路由简介
weixin_46474841的博客
05-11 244
路由 路由：就是一一对应关系的集合。 文章目录路由前端路由工作原理一、路由-官方路由基本使用步骤二、声明式导航-router-link1. Router-link组件介绍vue路由传参的方式图示-查询字符串![在这里插入图片描述](https://img-blog.csdnimg.cn/987e05d170b943fc93bb031b5cbe71e5.png)图示-params传参vue路由接收参数路由-重定向配置路由路由404三、编程式导航vue路由接收参数三、路由嵌套总结 前端路由工作原理 前端
VUE-路由详解
damadashen的博客
05-14 2680
介绍VUE路由及使用，简单介绍动态路由、嵌套路由、编程式的路由及命名路由的使用
详解VUE路由
前端程序猿的博客
12-29 1530
详解VUE路由以及简单的栗子
vue 路由
最新发布
05-27
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。Vue Router 可以轻松地实现前端路由功能，例如页面跳转、参数传递、路由拦截等。下面是一个简单的 Vue Router 的使用示例： 首先，在 Vue.js 项目中安装 vue-router： ``` npm install vue-router --save ``` 然后，在 main.js 中引入 Vue Router，并注册路由： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ routes }) new Vue({ router, render: h => h(App) }).$mount('#app') ``` 在上面的代码中，我们先引入了 Vue 和 Vue Router，然后注册了路由。接着，我们定义了两个路由，分别是根路径和关于页面，对应的组件分别是 Home 和 About。最后，我们创建了一个 VueRouter 实例，并将其传递给 Vue 实例中。 在组件中使用路由非常简单。只需要使用 router-link 组件来创建链接，使用 router-view 组件来呈现视图即可。例如，在 App.vue 中： ```html <template> <div> <h1>My App</h1> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view> </div> </template> ``` 这样，我们就可以在页面中看到两个链接：Home 和 About。当用户点击链接时，Vue Router 会根据路由配置自动加载对应的组件，并将其渲染到 router-view 中。 当然，Vue Router 还提供了很多其他的功能，例如动态路由、命名路由、路由嵌套等等。要了解更多关于 Vue Router 的使用和配置，请参考官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值