Vue-router：1、路由简介

最新推荐文章于 2023-04-10 17:24:49 发布
最新推荐文章于 2023-04-10 17:24:49 发布
阅读量191 收藏
点赞数 1
分类专栏： 笔记 vue-router 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tinglis/article/details/114303248
版权

Vue-router：1、路由简介

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。

在开发中，路由分为：

  • ​ 后端路由
  • ​ 前端路由

后端路由

  • 概念：根据不同的用户 URL 请求，返回不同的内容

  • 本质：URL 请求地址与服务器资源之间的对应关系
    在这里插入图片描述
    SPA（Single Page Application）

  • Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）

  • SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内 容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作

  • SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历 史的变化、但是hash的变化不会触发新的URL请求

  • 在实现SPA过程中，最核心的技术点就是前端路由

前端路由

  • 概念：根据不同的用户事件，显示不同的页面内容
  • 本质：用户事件与事件处理函数之间的对应关系
    在这里插入图片描述
爱发呆的程序员
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
路由：Vue-Router-1
测试开发架构师
04-20 148
路由：Vue-Router-1 一、动态路由 1.1、动态路由方式一：路径 动态路由示例：如下图在mine后面加:name/:sex来传递动态路由，?后面的不影响路径导向 获取路径上面的动态参数：可以通过路由或路由器来获取，下面我们来通过示例来打印下 路由通过this.route，路由器通过this.$router，我们一般使用路由来获取数据 通过路由对象获取的路径参数 1.2、动态路由方式二：属性 通过props拿到动态参数 把props改成true，就可以通过路径或者pro
浅谈 vue3 路由 router（1）
cchhllll的博客
03-05 2130
将 Vue Router 添加到组合中时，我们需要做的就是将我们的组件映射到路由并让 Vue Router 知道在哪里渲染它们。 vue-router默认使用是Hash模式，Hash模式主要是通过url中的hash值来变化的。 Hash（即#）是url的一个锚点，代表的是网页中的一个位置，当hash值变化时，浏览器就滚动到相应的位置，所以不会重新加载页面。在hash值变化的同时url会被浏览器记录下来，这样既可以使用浏览器的后退了。简单来说，就是通过改变url中#...
使用router.go(-1)时，如何判断是否有历史记录
程序员超超的博客
04-10 719
但是有一个问题，如果这个页面没有上一级页面，也就是用户直接进入的这个页面，而不是从其他页面跳转进入的这个页面，点击按钮就会失效。如图所示，左边有一个按钮，作用就是返回上一级，我是用vue3，第一个想到的是使用。有历史就返回上一级，没有历史就返回首页。我第一个想到的解决方案是监听。最后的解决方案是使用。
Web前端vue必做笔记之一:路由功能
qq_42302014的博客
11-17 177
Web前端vue必做笔记之一:路由功能 配置路由index.js import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import Blog from '../views/Blog.vue' import Video from '../views/Video.vue' import Login from '../views/Login.vue' const rou
16. Vue的路由Vue Router -1
CRMEB小程序商城的博客
01-20 973
看过很多vue相关的教程，我觉得是讲的人很嗨，不管你听不听得懂，总是自说自话，学的人是没有办法坚持下去，能坚持下去的，扔掉教程自己写一遍完全懵逼，其实vue最大的好处就是组件化开发。那么，vue的学习就得最终回归到组件化里边去，只有去到组件化开发环境中去切实走一遍之前学过的知识点，通过一个项目完全串联，才会领略到vue的强大，否则，我个人认为，如果你对jquery够熟悉，它也足够的优秀！ 这一章节我们正式进入vue的周边生态vue-router，正式进入真实项目中学习，串联起之前的所有知识！ 如果你还没.
理解路由
weixin_34348111的博客
01-20 397
原文地址：http://syaning.com/2017/01/10... ♪ 理解Web路由 1.什么是路由 在Web开发过程中，经常会遇到『路由』的概念。那么，到底什么是路由？简单来说，路由就是URL到函数的映射。 2.router和route的区别 route就是一条路由，它将一个URL路径和一个函数进行映射，例如： /users ...
vue-router：嵌套路由的使用方法
01-21
我们已经学习过了Vue模板的另外定义形式，使用<template></template>。 <!-- 模板抽离出来 --> 首页 新闻 然后js里定义路由组件的时候： // 1. 定义（路由）组件。 const Home = { template: ...
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-tab:Vue.js tab 组件，基于 Vue Router
08-05
Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :check_mark_button: ...
vue-auto-routing：自动生成Vue路由器路由
02-27
自动路由自动生成Vue路由器路由。 您可能要使用 ，其中包含有关路由的所有有用功能。安装$ npm install -D vue-auto-routing要求webpack> = v4.0.0用法vue-auto-routing通过使用自动解析Vue路由器路由。 路由是使用...
vue项目使用$router.go(-1)返回时刷新原来的界面
热门推荐
line
11-18 4万+
在项目需求中，我们常常需要使用$router.go(-1)返回之前的页面，但是却发现，之前的界面，保持着上次跳转的状态，比如说：弹框未关闭之类的等等，。。。。。 问题如下： 界面1 ： 界面2使用$router.go(-1)返回上一次的界面 由于使用$router.go(-1)返回，导致之前的数据都保留，并未刷新原来的界面，如下：还是显示跳转前的弹框 解决方法1： 不要使用...
vue-router（1）
Milan_KunderLa的博客
04-20 328
1.什么是路由？根据不同的地址跳转到不同的页面2.单页面应用：通过js使页面看起来到了另一个页面，但是其实这个页面一直没有刷新不用频繁的与服务器进行请求，不需要把整个页面进行刷新，而是通过ajax技术进行了局部刷新3.设置路由a、为项目安装vue-router npm install vue-router --save在package.json文件中会添加vue-router依赖的配置并且在nod...
解决$router.go(-1)返回上一层页面不刷新页面问题
u011280778的博客
10-06 7050
原因：页面没有跳转过去，但网址已经跳转过去了，这个原因是因为他没有进行缓存，所以页面没有进行及时的渲染。 方案一 //先在router/index.js中添加路由元信息，设置需要缓存的页面 routes: [{ path: '/', name: 'index', component: index, meta: { keepAlive: false, //此组件不需要被缓存 } },{
Vue-Router2.0使用1
大灰狼的小绵羊哥哥的博客
07-09 721
main.js import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '',
配置静态路由
qq_38151401的博客
03-21 2259
一、网络结构 （1） 交换机与PC机、交换机与路由器的连接由以太网接口用直连线连接即可（每个设备会自动生成无数个以太网接口f0/0、f0/1……） （2） 路由器之间是广域网之间连接，必须用串口serial相连，并且连接线用串口DTE连接 二、实验过程 1、PC配置 PC配置： PC1配置： 2、路由器配置 （1）Router0 配置路由器Router0 FastEt...
Vertx之web-router
Lance
01-06 474
介绍 路由器从HttpServer接收请求并将其路由到它包含的第一个匹配路由。路由器可以包含许多子路由。 1. maven项目依赖 <dependency> <groupId>io.vertx</groupId> <artifactId>vertx-web</artifactId> </dependency> <dependency> <groupId>com.fasterxml.jackson.c
Web开发中的"路由"是什么意思？（关键词：Web开发/路由）
Henry1991back的博客
12-01 1万+
路由就是URL到函数的映射。在web开发中，“route”是指根据url， 分配到对应的处理程序。路由： 就是一个路径的解析，根据客户端提交的路径，将请求解析到相应的控制器上； 从 URL 找到处理这个 URL 的类和函数。参考文献： 1.理解Web路由 2.Web开发中的”路由”是什么意思？ 3.web 开发中的路由是什么意思
WEB开发中的路由
weixin_44914120的博客
07-27 345
路由 就是对应关系，就是URL到函数的映射 可以将路由理解为月老，将牛郎（前端请求的URL地址）和织女（后端的处理函数）连接到一起 router和route的区别 route就是一条路由，它将一个URL路径和一个函数进行映射 router可以理解为厂库管理员，厂库（路由映射表）里面存放着很多不同的货物（函数），当接收到一个URL请求后，router去厂库（路由映射表）中查找相应的函数，每个请求...
[转] 理解Web路由
weixin_34310127的博客
01-26 382
1. 什么是路由 在Web开发过程中，经常会遇到『路由』的概念。那么，到底什么是路由？简单来说，路由就是URL到函数的映射。 2. router和route的区别 route就是一条路由，它将一个URL路径和一个函数进行映射，例如： /users -> getAllUsers() /users/count -> getUsersCount() 这就是两条路由，当访问...
vue-router的子路由children
最新发布
09-15
vue-router的子路由children是指在父路由中嵌套子路由的一种配置方式。通过配置children参数，我们可以实现多层嵌套路由的功能。 在Vue.js中使用vue-router库时，可以通过在父路由的配置中添加children字段来定义子...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值