记vue-router的使用

最新推荐文章于 2022-04-26 14:10:55 发布
最新推荐文章于 2022-04-26 14:10:55 发布
阅读量203 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fffvdgjvbsfkb123456/article/details/105685334
版权
本文详细介绍了vue-router的使用，包括安装、配置、动态路由、懒加载、嵌套路由、编程式和声明式导航、路由参数传递、$router与$route的区别、导航守卫及keep-alive组件的使用。重点讲解了编程式导航的router.push、命名路由与查询参数的传递以及全局前置守卫的设置。
摘要由CSDN通过智能技术生成

vue-router是Vue.js的官方路由插件，它和vue.js是深度集成的，适用于构建单页面应用。
官方网址：https://router.vuejs.org/zh/
vue-router是基于路由和组件的：

  • 路由用于设定访问路径，将路径和组件映射起来。
  • 在vue-router的单页面应用中，页面路径的改变就是组件的切换。

路由的安装步骤：

路由安装步骤
安装后在router文件夹下创建index.js文件
在这里插入图片描述
index文件中配置：
在这里插入图片描述
在mian.js文件中挂载路由实例
在这里插入图片描述

使用vue-router步骤：

最低0.47元/天 解锁文章
晓未苏
关注
专栏目录
vue 路由
JS中字符串的操作
04-03 288
安抚
缓存操作与组件路由
爱敲代码的狼仔
10-26 597
缓存操作与组件路由 Keep-alive 缓存 在web服务请求当中，有部分数据属于频繁被查询，比如，用户信息，logo信息。将这些数据存储到一个方便查询，或者直接获取的位置上，来减轻服务器查询压力。这种策略叫做缓存。 VUE当中keep-alive只是基于前端组件的狭义的缓存，通常和component标签结合使用，对动态加载的组件进行缓存 keep-alive缓存的基本使用 就是使用keep-alive标签包围component标签，这样动态加载的组件就会被缓存 定制缓存 includ
router和keep-alive
qq_43145310的博客
04-26 1807
router的使用 this.$router.replace('/home')，无法前进后退。 this.$router.push('/home') 可以前进后退 // 路由的全局对象，包含所有的路由对象 console.log(this.$router) // 当前活跃对象 console.log(this.$route) // 点击函数中router携带参数 this.$router.replace({ path: '/profile', query: {
20.进入商品详情页Detail
m0_62598303的博客
03-04 468
like.vue组件中 给li添加一个点击事件 @click="goDetail" 对应的方法 methods:{ goDetail(){ this.$router.push({ path:'/detail' }) } }, 对应home页面：添加click:true this.$nextTick(() => { this.oBetterScroll = new BetterScorll(t.
Vue页面中使用this.$router.replace访问同一页面，数据不刷新的问题
qq_39182029的博客
05-13 9963
Vue页面中使用this.$router.replace访问同一页面，数据不刷新的问题 问题原因： vue路由切换实际是组件间的切换，在我的详情页中，钩子方法使用的是created()方法，在不强制刷新或者重启时只会创建一次，所以引用相同组件的时候，页面数据就无法刷新。 我的解决方法： 方法1.在详情页添加一个watch监听路由变化（不推荐，每次返回时会刷新一次列表数据，用户体验不好） watch：{ '$route' (to,from){ this.$router.go(0); } } ​
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-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的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
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示例用法//...
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之this.$route.query和this.$route.params的使用与区别
热门推荐
lsy__lsy的博客
04-18 12万+
一、this.$route.query的使用  1、router/index.js    {    path:'/mtindex',    component: mtindex,    //添加路由    children:[     {      path:':shopid',      component:guessdetail     }    ]         ...
vue高级4-router嵌套路由（children）、: id、params.id（显示id）、$route.push()、路由重定向（rediect）
weixin_43010586的博客
02-29 5598
path:"/abc/:id" routrer这里的abc路径要与home里面的路径一样，：name类似于参数（一般是id） home里面的路径，这里的xm和xh就是传的参数 最后点击about或者news都是显示出about组件，这并不是报错，按F12键也并没有问题，是因为router里面绑定的是About组件，效果不变 但是我们可以发现，点击about和News显示的地址是不一样的，这就...
vue中create 什么触发_使用vue-router、keep-alive点击当前组件跳转，会触发该当前组件的created以及mounted钩子函数...
weixin_34348050的博客
02-05 1073
问题描述目前在做一个小demo，使用了parcel+vue+vue-router+axios+muse-ui，实践中需要使用keep-alive保证组件不会被刷新，当点击该问题组件跳转其详情组件的时候，居然触发了该组件的钩子函数，使得该组件的ajax请求又发了一遍请把代码文本粘贴到下方(请勿用图片代替代码)router：const Index = () =>import ('../compo...
vue切换菜单时不需要页面刷新_antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作...
weixin_39883079的博客
02-05 712
废话不说，上代码！nav 1nav 2nav 3重点：1，selectedkeys要设置成$route.path地址2，a-menu-item 的key设置成要去的地址刷新页面，成功！补充知识：vue根据路由刷新页面(切换菜单刷新页面)刷新页面有两种方法：一种是用:localtion.reload()；但是这种是重新加载页面，造成一闪一闪的效果。一种是用provide+inject，provide...
vue-router this.$route和this.$router的区别
秋来九月八
11-08 2022
当你在组件中console.log(this.route)和console.log(this.route) 和 console.log(this.route)和console.log(this.router) 时会发现比较明显的差异 这是this.$route {name: "Button2", meta: {…}, path: "/button/button2", hash: "",query:...
10分钟学会如何在组件化的vue项目中使用vue-router实现基本的路由功能
绝圣弃智-零的博客
03-20 640
1.在components文件夹中创建组件（当然也可以创建子文件夹） 假设建立了三个组件： Home.vue //假设路径时src/components/Home.vue First.vue //假设路径时src/components/First.vue Second.vue //假设路径时src/components/Second.vue ...
vue-router学习二：动态路由（路由传递数据的一种方式），路由懒加载，嵌套路由，路由传递参数方式，导航守卫，keep-alive标签
冯安晨
03-16 1202
文章目录前言十一、动态路由十二、认识路由的懒加载十三、路由懒加载的效果十四、懒加载的方式十五、认识嵌套路由十六、嵌套路由实现十七、嵌套默认路径十八、准备工作十九、传递参数的方式1. 传递参数方式一: ``2. 传递参数方式二: JavaScript代码二十、获取参数1. $ route和$ router是有区别的导航守卫1. 为什么使用导航守卫?2. 导航守卫使用3. 导航守卫补充二一、keep-alive遇见vue-router二二、TabBar实现1. TabBar实现思路2. TabBar代码实现 前
Vue-Router中的keep-alive使用（自我理解）
weixin_53874202的博客
03-03 3755
参考：coderwhy老师视频 作用 保持之前页面所选展示内容不被默认内容替换（比如在首页有两个按钮，一个是首页新闻，一个是首页消息，默认展示新闻页面，当点击消息页面后，需要跳转到关于页面，再次点击首页是仍然需要展示之前点击的消息页面内容，而不是一开始默认的新闻内容，这时就需要使用keep-alive来保护跳转前的路由状态不被销毁） 理解构思 需要先通过脚手架创建项目（vue create routerkeepalive） 在Home.vue内部有两个子页面HomeNews.vue和HomeMessage
Vue 问题笔记 vue-router单页面应用跳转路由时触发事件
zem
07-13 1万+
在使用vue-router时，我们可以很方便地实现单页面应用，当我们想要跳转到“另一个页面”的时候，只要调用vue-routerAPI中的方法，传入相应的路由作为参数即可。 单页面应用的一个特点是，如果某个路由已经在本地加载过了，即已经将生命周期走到了mounted的时候，如果我们再进入这个页面，不会再执行created和mounted里面的方法。 简单来说，有两个页面A和B，我们使用单页面的...
Vue进阶：vue-router安装与使用教程
使用ES6语法，导入`vue-router`模块并调用`Vue.use(VueRouter)`将其注册为Vue的插件。接下来，实例化Vue Router，定义路由规则。路由配置包含两个主要部分：`path`表示用户访问的URL路径，`component`则指定了与该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值