Vue全家桶之vue-router

最新推荐文章于 2022-09-01 11:11:36 发布
最新推荐文章于 2022-09-01 11:11:36 发布
阅读量227 收藏
点赞数
分类专栏： 前端开发、vue 文章标签： vue javascript web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clearlove_8/article/details/104145048
版权

路由分为前端路由和后端路由，后端主要是通过识别请求路径，分发对应的资源，
而前端路由主要是针对SPA单页面应用的局部刷新。识别触发的事件，分发对应的渲染内容。
vue-router中的router-link就会默认被渲染为a标签，在其path中的路径上加上#采用hash链接的方式进行导航，从而渲染对应的组件。

下面是使用vue-router的基本步骤：

1.引入库文件
2.添加路由链接
3.添加路由占位
4.定义路由组件
5.创建路由实例对象并配置规则
6.将路由挂载到vue根实例中

关于动态路由匹配：

（1）使用$route.params.参数，不够灵活
3.png
（2）使用Prop传参，boolean类型这一种最简单常用
5.png
(3)使用prop传递静态参数
4.png
(5)动静参数结合
6.png

命名路由的导航

7.png

编程式导航

this.$router.push('')  
this.$router.go(-1)
CenterElse
关注
专栏目录
(精华2020年5月14日更新) vue实战篇 vue-router动态路由的实现权限控制
一点一滴
05-12 1万+
router.js import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); import home from '../pages/home.vue'; import news from '../pages/news.vue'; var allRoutes = [{ path:'/login', name:'login', meta:{ title:'登陆'
【快应用】为什么调用router.clear()后，立即调用router.getLength()发现页面并未销毁
华为开发者联盟
12-09 324
调用router.clear()后，页面销毁需要一定的时间，建议使用setTimeout延迟1s后再调用router.getLength()，这样就可以获取最新的页面栈数量。调用router.clear()后，立即调用router.getLength()发现页面并未销毁。欲了解更多更全技术文章，欢迎访问。
vue全家桶 （router，vuex）
子非渔
03-13 276
<!-- --> <template> <div class=''></div> </template> <script> //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组
Vue基础（八）——路由
pro1822的博客
09-01 579
Vue基础（八）——路由
【vue-router】vue-router没有提供remove routes方法情况下，清空router实例中路由的方法
热门推荐
baidu_28647571的博客
09-29 2万+
问题描述 项目中新增了一个需求，需要在一项目中访问三个不同项目A，B，C，于是创建了一个工作台，在工作台中提供了几个项目的常用页面的链接，当点击A项目的页面，再返回工作台点击B项目的页面，会出现404的情况 原因 用户在工作台页面时并未获取到菜单，在点击页面时，我们会根据url中带有的项目地址，获取项目标识决定请求哪个链接获取相应菜单，用户在第一次点击了项目A，动态获取了菜单，我们通过route....
Vue全家桶(vue-router+vuex)
06-21
其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三方组件的使用、手把手带你打造自己的表单组件、Vue核心插件之vue-router和vuex、基于权限控制实现...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
13_Vue全家桶 - Vue-Router详解.pptx
最新发布
01-25
4. 在组件中通过`this.$router`进行编程式导航，或者使用`<router-link>`进行声明式导航。 5. 利用`beforeRouteEnter`、`beforeRouteUpdate`和`beforeRouteLeave`等导航守卫钩子函数，实现对路由切换的控制，如权限...
vue-router的实现原理_你可能不清楚的 Vue Router用法
weixin_39995297的博客
11-24 220
Vue Router 简单易上手，能实现大部分的需求。但是，如果在项目里需要更细致的控制路由，以实现与其同步的效果，就需要挖掘其文档里没详细提及的内容。第一章为路由元信息用途挖掘。路由元信息用途(1)验证用户身份，定义用户权限能访问的页面大部分项目，除了登录页、重置密码页、用户协议页以外，页面都需要验证用户身份进行访问。使用 Vue Router 可以配合后端进行双重验证。(登录)验证身份方法：1...
【laravel】访问路由报错问题，执行 php artisan route:clear 删除路由缓存文件，以及DingoApi的路由写法
小乔流水仁家的博客
12-06 3454
前言： 路由缓存：路由缓存不会作用于基于闭包的路由。要使用路由缓存，必须将闭包路由转化为控制器路由。 1、如果你的应用完全基于控制器路由，可以使用 Laravel 的路由缓存，使用路由缓存将会极大降低注册所有应用路由所花费的时间开销，在某些案例中，路由注册速度甚至能提高100倍！想要生成路由缓存，只需执行 Artisan 命令 ： php artisan route:cache 2、运行完...
Vue全家桶实践（四）---vue-router
Creabine的博客
12-28 3607
最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算前端梳理一下思路。 相关博客： Vue全家桶实践（一）—vue-cli Vue全家桶实践（二）—iView Vue全家桶实践（三）—axios Vue全家桶实践（四）—vue-router Vue
你可能不清楚的 Vue Router 深度用法（一）
weixin_34289454的博客
02-16 650
Vue Router 简单易上手，能实现大部分的需求。但是，如果在项目里需要更细致的控制路由，以实现与其同步的效果，就需要挖掘其文档里没详细提及的内容。第一章为路由元信息用途挖掘。 路由元信息用途 （1）验证用户身份 大部分项目，除了登录页、重置密码页、用户协议页以外，页面都需要验证用户身份进行访问。使用 Vue Router 可以配合后...
vue-router退出登录清空路由
此去经年的博客
09-11 1万+
router没有提供清空数据的方法。我们可以这样写 this.$router.replace({path: '/login'});location.reload();
nginx配置vue前端代理
Clearlove_8的博客
04-21 7596
背景：做一个前后端分离的项目，使用vue-cli创建的前端项目，在前端配置跨域请求。 一、开发阶段 在vue.config.js中配置devserver的proxy进行代理请求配置，然后将所有请求改为/api开头的即可。但是这样配置只在开发阶段起作用。所以在nginx上部署的时候，需要再重新配置请求代理。 vue.config.js中代码配置如下： // 相当于webpack-dev-server...
npm install 连接不上github解决办法
Clearlove_8的博客
10-22 3801
1.https://github.com.ipaddress.com/ 用ipaddress查询dns服务器地址 2.在host文件里配置 xxx github.com 3.使用npm ，尽量不用cnpm
纯vue+ui项目与小程序、uni-app开发的异同
Clearlove_8的博客
08-06 2004
一、前言 有些人会问，不都是vue语法吗，有什么差异呢。我不是说的语法，我是说的使用方面。 最近三个月一直在做移动端的项目。使用微信小程序原生和uniapp框架做开发，对vue的一些原始语法有些生疏。现在来对他们的一些差别进行对比。 二、内容 1.纯vue项目使用比如Element-ui、Ant-design、vant等ui框架来渲染界面。而weixin和uniapp则有自带的ui组件(当然也可以使用其他ui框架，比如uView)。 2.纯vue项目需要使用vue-router及其导航首位来配置页面跳转。w
vue.nextTick和vue.set
Clearlove_8的博客
11-03 1556
一、vue.nextTick 1.场景一：在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。 在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。 2.场景二：在数据变化后要
Vue全家桶学习：Vuex与Vue-Router基础解析
- 使用`<router-link>`组件进行页面间的链接。 - 在组件内部，通过`this.$router.push`方法进行程序化跳转。 ### 子路由配置 子路由允许在一个父路由下设置多个子页面。例如，商品模块可能包括列表页和详情页。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值