vue 路由 及 跳转传递参数的总结

vue-router

  • vue-router 是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。
  • 传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是应该是路径之间的切换,也就是组件的切换

1. 是路由和页面(组件)对应

2. 通过router-link进行跳转

 1 <router-link 
 2     :to="{
 3         path: 'yourPath', 
 4         params: { 
 5             id: id, 
 6             dataObj: data
 7         },
 8         query: {
 9             id: id, 
10             dataObj: data
11         }
12     }">
13 </router-link>
  • 这里涉及到三个参数
path -> 是要跳转的路由路径(推荐换成 name 值,name: pathName ,命名路由,两者都可以进行路由导航)
params -> 是要传送的参数,参数可以直接 key:value 形式传递(类似post) 
query -> 是通过 url 来传递参数的同样是 key:value 形式传递(类似get) 
接收参数: 
this.$route.query.id 
this.$route.params.id 

关于path路径加不加 / 的问题,加了/就是在根路径下跳转,不加就是在当前路径后面跳转,子页面,使用命名路由就不用管加不加 / 的问题了

3. 复用组件时,想对路由参数的变化作出响应的话,可以 watch(监测变化) $route 对象

1 watch:{
2     //监听相同路由下参数变化的时候,从而实现异步刷新
3     '$route'(to,from){
4         //做一些路由变化的响应
5         this.loading = true;//打开加载动画
6         this.getCateShop();//重新获取数据
7     },
8 },

4. 全局钩子,在main.js配置,可用作用户拦截

 1 //在进入路由之前, 每一次都会执行此方法  全局钩子
 2 router.beforeEach(function(to,from,next){
 3   //设置网页标题
 4   document.title = to.meta.title;
 5   //检查是否已登录
 6   let userObj = JSON.parse(sessionStorage.getItem('user'));
 7   if(userObj){
 8     //执行方法,将用户名设置进全局参数  vuex
 9     //提交mutation的Types.SETUSERNAME方法
10     //第二个参数是携带的参数
11     //main.js使用vuex的提交方法,不需要this.$store.commit(),直接就store.commit()
12     store.commit(Types.SETUSERNAME,userObj.username);
13   }else{
14     //如果未登录,想要进入admin目录,则自动跳回首页
15     if(to.path.indexOf('admin') != -1){
16     //   alert("进了");
17       router.push({name:'home'});
18     }
19   }
20   next(); //继续往下走
21 });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Angular&服务

Angular CLI 常用终端操作命令

初始化创建项目时,自动添加了 <code> @angular/router </code> ,自动添加到package.json 文件中

16340
来自专栏码农笔录

cordova打包vue2(webpack)android、ios app

43720
来自专栏俗人笔记

浏览器用户脚本—打造自己的专属页面

一段用户脚本就是一个程序,通常用JavaScript语言来写,用于修改web页面以提升浏览体验。通常通过浏览器的用户脚本管理插件来开启,例如Tampermonk...

88440
来自专栏python3

Django + Uwsgi + Nginx 的生产环境部署

使用runserver可以使我们的django项目很便捷的在本地运行起来,但这只能在局域网内访问,如果在生产环境部署django,就要多考虑一些问题了。比如静态...

2.5K40
来自专栏深度学习之tensorflow实战篇

linux下搭建django记录笔记,未完稿,节后继续

使用ECS服务,有时需要更新apt-get,故先要先执行第一步 使用:SSH连接 1:更新apt-get #sudo apt-get update ? ...

35650
来自专栏逸鹏说道

使用fiddler模拟http请求

以前看见过,没发,现在又看见了,向大家推荐一下: 概述 与httpwath相比,fiddler能模拟http请求、能断点调试、http分析统计吸引了我,...

46650
来自专栏云飞学编程

新手自制一个单独读写txt文本的python模块

作为一个新学习python的小白,经常遇到读取文本和写入文本的with open,出现各种编码错误或者其他错误,很烦,这里给大家介绍一个比较实用的方法。

16420
来自专栏DeveWork

代码实现WordPress点击进入随机一篇文章的方法

在开始之前,你可以点击本站右侧“类Metro风格侧边栏”的中间那个图像,如果你够仔细的话,你会发现你的浏览器的地址栏里的url首先是 http://devewo...

370100
来自专栏互联网杂技

js刷新页面

如何实现刷新当前页面呢?借助js你将无所不能。 1,reload 方法,该方法强迫浏览器刷新当前页面。 语法:location.reload([bForceGe...

1.2K50
来自专栏桥路_大数据

react native打包apk

36730

扫码关注云+社区

领取腾讯云代金券