Vue （vue-router）路由

最新推荐文章于 2024-05-16 01:46:25 发布
最新推荐文章于 2024-05-16 01:46:25 发布
阅读量191 收藏
点赞数
分类专栏： 【 Web前端开发 】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yexiangCSDN/article/details/117359553
版权
【 Web前端开发 】 专栏收录该内容
190 篇文章 4 订阅 ¥199.90 ¥99.00
订阅专栏

我是表哥Harker，表妹我来咯~

本篇讲解 Vue 路由的基本概念与原理 ，路由是一个比较广义和抽象的概念，路由的本质就是对应关系，在开发中，路由分为：  后端路由 ， 前端路由 ，路由的概念从现在到最后都是一直在用到的，所有路由的知识必须要牢固，后面不管是微信小程序，还是其他的框架开发都是必备的存储

 

1、后端路由  （node.js 就是后端路由）

  • 概念：根据不同的用户 URL 请求，返回不同的内容 
  • 本质：URL 请求地址与服务器资源之间的对应关系 

 

2、SPA（Single  Page Application 单页面程序）

  • 后端渲染（存在性能问题） 
  • Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作） 
  • SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作 
    • 好比微信程序你每次切换微信、通讯录、发现、我 都是一个个单独的页面，每个页面的路由url也不一样，就算你点击发现又点击进去了扫一扫或者其他游戏购物等也都是进入另外一个页面
    • 所以SPA的含义就是 &#
了解本专栏 订阅专栏 解锁全文
HarkerYX
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Vue-router入门教程笔记
06-27
技术胖的Vue-router教程笔记 详情：http://jspang.com/2017/04/13/vue-router/
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
基于 vue-router 的案例：后台管理路由案例
icemwj的博客
08-10 1188
案例：后台管理路由案例 案例分析： 1. 用到的路由技术要点： 路由的基础用法 嵌套路由 路由重定向 路由传参 编程式导航 2. 根据项目的整体布局划分好组件结构，通过路由导航控制组件的显示 抽离并渲染 App 根组件 将左侧菜单改造为路由链接 创建左侧菜单对应的路由组件 在右侧主体区域添加路由占位符 添加子路由规则 通过路由重定向默认渲染用户组件 渲染用户列表数据 编程式导航跳转到用户详情页 实现后退功能 案例完整代码： <!DOCTYPE html> <html lang="
Vue Router详细教程
最新发布
2401_85013604的博客
05-16 1021
说起路由你想起了什么？路由是一个网络工程里面的术语。路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。— 维基百科额，啥玩意?没听懂。在生活中，我们有没有听说过路由的概念呢?当然了，路由器嘛。路由器是做什么的?你有想过吗?路由器提供了两种机制: 路由和转送。路由是决定数据包从来源到目的地的路径。转送将输入端的数据转移到合适的输出端。路由中有一个非常重要的概念叫路由表。路由表本质上就是一个映射表，决定了数据包的指向。
路由（前后端路由阶段+vue-router）
B的博客
11-15 559
路由 （一）后端路由阶段 早期的网站开发整个HTML页面是由服务器来渲染的。服务器直接生产渲染好对应的HTML页面,返回给客户端进行展示. 1、后端路由 一个页面有自己对应的网址,也就是URL. URL会发送到服务器,服务器会通过正则对该URL进行匹配,并且最后交给一个Controller进行处理。 Controller进行各种处理,最终生成HTML或者数据,返回给前端. 当我们页面中需要请求不同的路径内容时,交给服务器来进行处理,服务器渲染好整个页面,并且将页面返回给客户顿. 这种情况下渲染好的页面,
vue-router（路由）详细教程
weixin_57320268的博客
04-17 996
  由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。   有的小伙伴会有疑虑，为什么我们不能像原来一样直接用a标签编写链接呢？因为我们一般用Vue做的都是.
导航守卫|Vue Router
dingdeng7412的博客
09-18 151
导航守卫 导航守卫这一块，是通过Vue Router文档进行学习和总结 -链接地址:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 1.全局前置守卫 router.beforeEach((to,from,next)=>{}) 在实例化VueRouter的文件中,进行全局守卫的配置 ...
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...
vue-router.js
12-30
vue路由vue-router.js文件下载
如何利用vue+vue-router+elementUI实现简易通讯录
10-17
Vue Router则是Vue.js的官方路由管理器，它允许我们轻松地定义和管理应用的页面导航。而Element UI则是一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库，提供了丰富的UI组件，简化了前端界面的开发。 ...
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： 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-router超详细教程(1)
weixin_43755104的博客
04-14 336
vue-router教程 文章目录vue-router教程先看一目录下载 `npm i vue-router -S`在main.js中引入 `import VueRouter from 'vue-router'`安装插件`Vue.use(VueRouter)` router文件夹下index.js文件配置路由规则router文件夹下index.js文件在app.vue中留坑 `` vue-rou...
超详细，Vue-Router手把手教程
鹏多多的博客
08-09 1019
1，router-view <router-view>是一个功能性组件，用于渲染路径匹配到的视图组件。可以配合<transition>和<keep-alive>使用。如果两个一起用，要确保在内层使用<keep-alive>。 <router-view></router-view> <!--或--> <router-view name="footer"></router-view> 如果<rou
vue-router教程示例
mapbar_front的博客
01-06 481
1、vue-router介绍 vue框架作为一个单页面应用（SPA）的框架，路由应该是其中最重要的一部分。 路由作为单页面应用的核心，原因就是router路由是一个项目的骨架，有了骨架，我们才能真正的填充基于这个骨架的血肉。 所以，vue-router是为了解决一个vue应用的骨架问题。 2、vue-router引入方式 使用script标签的方式：如果仅仅是学习，script方
Vue Router图文详细教程
小菜吉的博客
11-05 484
tag: tag可以指定<router-link>之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是<a> replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
vue-router详解及实现步骤
qiuyushuofeng的专栏
05-16 371
代码中有详细的解释，包含对单行代码的功能解释，欢迎阅读讨论 app.vue <template> <div> <div> <!-- 1、跳转到的路径， --> <router-link to="/home">home</router-link> <router-link to="/about">about</router-link> </div> &l
从vue-router浅谈前端路由到前后端分离
qq_41841048的博客
05-21 1922
路由 此处的路由指的是页面跳转的规则，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。可以简单理解为url跳转 现代前端开发中最流行的页面模型，莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面，通过动态替换DOM内容并同步修改url地址，来模拟多页应用的效果，切换页面的功能直接由前台脚本来完成，而不是由后端渲染完毕后前端只负责显示。前端三驾马车Angular,Vue,React均基于此模型来运行的。SPA能够以模拟多页面应用的效果，归功于其前端路由机制。 前端路由，顾名思
vue3 vue-router 路由跳转
09-02
在 Vue 3 中，你可以使用 Vue Router 进行路由跳转。下面是一些基本的步骤： 1. 首先，确保你已经安装了 Vue Router。你可以通过运行以下命令来安装它： ``` npm install vue-router@next ``` 2. 在你的主文件（例如 `main.js` 或 `main.ts`）中导入 Vue Router 和你的路由配置： ```javascript import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; import App from './App.vue'; import Home from './views/Home.vue'; import About from './views/About.vue'; const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; const router = createRouter({ history: createWebHistory(), routes }); const app = createApp(App); app.use(router); app.mount('#app'); ``` 在上面的示例中，我们创建了两个路由：`/` 对应 `Home` 组件，`/about` 对应 `About` 组件。你可以根据自己的需求添加更多的路由。 3. 在你的组件中使用路由跳转，你可以使用 `<router-link>` 组件或 `$router.push` 方法。 使用 `<router-link>` 组件： ```html <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> ``` 使用 `$router.push` 方法： ```javascript // 在方法中调用 methods: { goToHome() { this.$router.push('/'); }, goToAbout() { this.$router.push('/about'); } } // 或者在模板中调用 <button @click="$router.push('/')">Go to Home</button> <button @click="$router.push('/about')">Go to About</button> ``` 这样，当用户点击链接或按钮时，路由就会进行跳转。 这只是一个基本的示例，你还可以使用更多的 Vue Router 功能，如路由参数、嵌套路由、路由守卫等。你可以参考 Vue Router 的官方文档来了解更多信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HarkerYX

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值