Vue——vue-router

原创 于 2023-08-14 17:16:16 发布 · 541 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
本文详细介绍了VueRouter的基本概念，包括路由映射、基本使用、嵌套路由、参数传递（query和params）、props配置、replace属性、编程式导航、组件缓存、生命周期钩子（守卫）以及路由器的两种工作模式。

vue-router

相关理解

路由就是一组key-value的映射关系
路由器切换是销毁！！
npm i vue-router：注意版本，vue2需要安装vue-router@3.
在这里插入图片描述
在这里插入图片描述

基本路由

router-link 最终会转换成a标签。所以使用a标签的地方可以使用router-link路由。但如果不是a标签，如button按钮等，就需要借助编程式路由导航

路由基本使用

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

嵌套（多级）路由

在这里插入图片描述

路由传参

路由传参（query参数）

是通过query方式传递参数的
在这里插入图片描述

路由命名

该方法最好用在多级路由中/query对象的写法中在这里插入图片描述
在这里插入图片描述

路由传参（params参数）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

路由的props配置

在这里插入图片描述

replace属性

在这里插入图片描述

编程式路由导航

在这里插入图片描述

缓存路由组件

切换路由组件后，之前的路由组件是被销毁了！！如果重新切换回来，该组件是被重新挂载进去的，如果有一个input框之前被填写了内容，重写切换回来是不会有内容的。

在这里插入图片描述
在这里插入图片描述
缓存多个：include=[“Message”,“news”]

两个新的生命周期钩子

在这里插入图片描述

路由守卫

作用：对路由进行权限控制

全局守卫

全局前置守卫：在切换路由之前，进行某种信息的校验。如果信息校验错误，则不允许切换到该组件。
全局后置守卫：当已经切换到此组件时，进行的一些设置，如网页的标题等。

路由元信息：可存放如：切换到该组件时的网页标题title、该组件是否需要权限isAtuh等
在这里插入图片描述
在这里插入图片描述

独享路由守卫

可配合全局后置路由守卫一起使用
在这里插入图片描述

组件内守卫

在这里插入图片描述

路由器两种工作模式

在这里插入图片描述
npm run build打包
后生成了dist文件夹
在这里插入图片描述
在这里插入图片描述

标签
#vue.js #前端 #javascript
Sakura_0413
关注
Vuejs vue-router详解
baidu_41388533的博客
10-07 600
Vuejs vue-router详解 参考：最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili 目录 Vuejs vue-router详解 什么是路由？ 后端路由阶段 前端路由阶段 URL的hash HTML5的history模式：pushState HTML5的history模式：replaceState HTML5的history模式：go 认识vue-router 安装和使用vue-router 创建router实例 挂载到Vue实例中 应用三
VueJS 官方路由之 Vue Router
两个月亮
02-05 1232
Vue Router 是 VueJS 官方提供的路由插件，使用该插件你将能更加便利的管理 VueJS 创建的单页面应用程序（Single Page Web Application，SPA）中的组件间的动态切换。你可以使用 a 元素代替 router-link 元素，但并不推荐这么做。使用 router-link 而不是 a 元素可以使你获得来自 vue-router 的更多帮助。
VueJS基础系列：使用vue-router
foreverzwl
04-18 532
vue-router的作用： vuejs官方路由管理器，可以用来实现单页应用里，配合tab选项卡切换显示不同页面内容。 官方中文手册： https://router.vuejs.org/zh/ vue-router在项目中的使用： 1、如果项目中没有vue-router，需要自己添加上去，在项目中的package.json文件中添加依赖： 2、命令行下载安装 cnpm inst...
vuejs学习与总结——vue-router深入学习
l118
05-01 374
目录路由代码跳转动态路由路由的懒加载懒加载的作用懒加载的方式路由嵌套实现步骤vue-router参数传递params的类型query的类型总结 路由代码跳转 我们知道，路由的跳转可以通过路由跳转方式一 有时候，页面的跳转可能需要执行对应的JavaScript代码，这个时候就需要我们使用第二种跳转方式了 动态路由 在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，我们希望...
Vuejs学习六：CLI、vue_router
qq_28471889的博客
02-19 336
脚手架、vue-router 1 Vue CLI Command-Line Interface 命令行界面，可以帮助我们生成相关的依赖和代码。 如果想安装新版本，需要先卸载 npm uninstall vue-cli -g npm install -g @vue/cli 脚手架官网：https://cli.vuejs.org/zh/ 1.1 脚手架2的目录 build、config 用来做...
vuejs/vue-router 路由跳转 NavigationDuplicated 异常
富婆抱抱我
08-21 5890
vuejs/vue-router 异常报错 NavigationDuplicated出现场景版本解决方法 出现场景 使用vue-router进行路由跳转（Element也出现该问题是因为Element也使用了vue-router）。 使用 $router.replace 或 $router.push 跳转相同路径，两次或以上 版本 vue-router 3.1 解决方法 目前该问题为...
VueJs路由跳转——vue-router的使用
热门推荐
hsany330的专栏
12-05 1万+
对于单页应用，官方提供了vue-router进行路由跳转的处理，本篇主要也是基于其官方文档写作而成。 安装 基于传统，我更喜欢采用npm包的形式进行安装。 npm install vue-router --save 当然，官方采用了多种方式进行安装，包括bower,cdn等。 基本用法 在HTML文档中使用，只需要利用v-link这个directive就行了，如： a v-link=
vuejs学习5.4 vue-router
qq_39225271的博客
09-11 261
vue-router$route和 $router的区别导航守卫 $route和 $router的区别 $route表示活跃的路由 $router表示vue-router对象 导航守卫
vuejs学习5.2 vue-router的安装与配置
qq_39225271的博客
09-09 477
vue-routervue-routervue-router的安装vue-router的配置index.js文件vue实例中使用配置路由的映射关系设置默认路径——重定向修改为html5的history模式router-link属性补充代码跳转路由 vue-router vue-router是基于路由和组件的，将url路径和组件映射起来，在单页面中，页面路径的改变就是组件的切换 vue-router的安装 在不使用脚手架vueCLI时，通过webpack进行安装 npm install vue-router
Vuejs+vue-router打包+Nginx配置
Seven_Anon的博客
05-09 9737
其实这个网上已经有了很多人写了，为什么我还要再写这一篇博客？因为我亲身把他们生产的坑给踩了个通透（摊手。正文开始本次的项目是基于vue-cli生成的项目，采用的vue-router的history模式。到这里相信大部人还是类似了，接下来就是一个坑死人不偿命的网上诸多博客都在采用的巨坑。 在进行打包的时候，很多博客里都写了，将/config/index.js下，build中的assetsPublic
vue 路由 vue-router
忆凌波的专栏
03-18 611
地址：https://router.vuejs.org/zh/installation.html 1.安装 npm install vue-router --save // cnpm install vue-router --save 2.引入并且使用 vue.use(VueRouter) （main.js） import Vue from 'vue' import VueRoute...
vuejs生态只vue-router
JackLiu16的博客
01-07 282
<router-link></router-link> <router-view></router-view> var routes = [        {            path:  '/',            component: {                 tempate: `            &l...
VueJS 官方路由 Vue Router 之导航
两个月亮
02-07 623
全局前置守卫是导航守卫中的一种，是最常使用的导航守卫。全局前置守卫将在当前网站的任何页面发生跳转时触发，因此，你可以使用该守卫控制用户对某一路径的访问权限。
js文件里获取路由 vue_VueJs路由跳转——vue-router的使用
weixin_39600510的博客
12-20 3020
对于单页应用，官方提供了vue-router进行路由跳转的处理，本篇主要也是基于其官方文档写作而成。安装基于传统，我更喜欢采用npm包的形式进行安装。npm install vue-router --save当然，官方采用了多种方式进行安装，包括bower,cdn等。基本用法在HTML文档中使用，只需要利用v-link这个directive就行了，如：Go to view-a​ ps: v-l...
[Vuejs] 关于vue-router里面的subRoutes
weixin_33910137的博客
05-24 293
刚学习vue，可能有使用不对的地方，希望没有对大家造成困扰！   使用vue-router，为了能够更好的管理.vue文件，需要用到子路由。   先看个错误的例子 routers.js '/company':{ //公司 name:'company', component: functi...
vue-router指南-思维导图
weixin_30980795的博客
04-29 254
学习链接： https://router.vuejs.org/zh/guide/
Vuejs第五篇（vue-router路由和tabbar）
m0_57249797的博客
10-06 1255
一、vue-router-安装和配置方式 二、路由映射配置和呈现出来 三、路由的默认值和修改为history模式 四、router-link的其他属性补充 五、通过代码跳转路由 六、vue-router-动态路由的使用 七、vue-router-打包文件的解析 八、vue-router-路由懒加载的使用 九、vue-router-路由的嵌套使用 十、vue-router-参数传递一 十一、vue-router-参数传递二 十二、vue-router-router和route的由来 十三、vue-router
VueJs路由跳转中vue-router的使用
杨春建的博客
03-03 2265
原文地址：http://blog.csdn.net/hsany330/article/details/53463788对于单页应用，官方提供了vue-router进行路由跳转的处理，本篇主要也是基于其官方文档写作而成。安装基于传统，我更喜欢采用npm包的形式进行安装。npm install vue-router --save当然，官方采用了多种方式进行安装，包括bower,cdn等。基本用法在HT...
VueJs路由跳转(vue-router的使用)
weixin_30820151的博客
03-06 119
安装 基于传统，我更喜欢采用npm包的形式进行安装。 npm install vue-router --save 官方采用了多种方式进行安装，包括bower,cdn等。 基本用法 在HTML文档中使用，只需要利用v-link这个directive就行了，如： <a v-link="{path: '/view-a'}">Go to view-a</a>...
Vuejs2.0学习笔记之vue-router和vue-cli
weixin_33694620的博客
03-04 155
2019独角兽企业重金招聘Python工程师标准>>> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值