博客地址:https://ainyi.com/4

vue-router

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

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

2. 通过router-link进行跳转

 <router-link
:to="{
path: 'yourPath',
params: {
id: id,
dataObj: data
},
query: {
id: id,
dataObj: data
}
}">
</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 对象

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

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

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

博客地址:https://ainyi.com/4

vue 路由 及 跳转传递参数的总结的更多相关文章

  1. vue-cli 配置路由之间跳转传递参数

    1.有2种方式去传参,如下代码: <template> <div> <div>这里是首页</div> <router-link :to=" ...

  2. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  3. vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  4. Vue:不同页面之间的传递参数--params

    在嵌套vue-router情况下,不同页面之间传递参数可以通过params实现.而params传参分为两种情况: 1.参数在url中显示 首先你要确定自己要传的参数,并在控制路由的文件中的Router ...

  5. js跳转传递参数

    额,利用j获取了GridView中选中行数据后,通过JavaScript做跳转,传递参数的时候发现,当参数有中文的时候就会乱码, 当然出现这种情况的时候就需要对跳转的url进行编码 var urlX ...

  6. jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等(二)

    Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar ...

  7. vue项目webpack中Npm传递参数配置不同域名接口

    项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是 ...

  8. [转] 微信小程序 页面跳转 传递参数

    本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...

  9. Vue:不同页面之间的传递参数(二)---query

    1) 在router文件下的index.js中,添加相关路径 routes: [ { path: '/', name: 'Hello', component: HelloWorld }, { path ...

随机推荐

  1. 怎么解决syntaxerror:non-utf-8 code starting with \xc4'in file

    怎么解决syntaxerror:non-utf-8 code starting with \xc4'in file   首行增加,已测试可用. # coding=gbk   程序中出现中文,运行的时候 ...

  2. HTTP 初步探究

    网络上存在很多资源,也持续不断地生成新的资源.为了新建.获取和操作这些资源,引来了两个问题:如何定位资源,如何对他们进行操作.第一个问题引申出了 URI / URL 即 uniform resourc ...

  3. VS中Debug与Release、_WIN32与_WIN64的区别

    一.Debug与Release 1.  区别 Debug——调试版,生成的.exe中包含很多调试信息,若直接发包,比较大: Release——发布版 2.  如何区分是Debug编译还是Release ...

  4. docker install

    1.安装必要工具集 sudo yum install -y yum-utils 2.安装Docker官方源 sudo yum-config-manager \ --add-repo \ https:/ ...

  5. 安装memcache遇到的坑

    memcached 在make的时候出错,解决办法: # vim memcached.c 修改如下几行56 /* FreeBSD 4.x doesn't have IOV_MAX exposed. * ...

  6. Android中系统键盘的自动弹出、隐藏和显示

    一.需求 在开发Android app过程中经常用到EditText,需要在界面加载完成后自动弹出系统键盘,更希望可以控制键盘的隐藏和显示,本文介绍其实现方法. 二.系统键盘的自动弹出 @Overri ...

  7. Robot Framework - 2 - 创建测试库

    04- 创建测试库--基础概念 Robot Framework 实际的测试能力是由测试库提供的. ***** 支持的编程语言 Robot Framework 自身是用 Python 编写的,能使用 P ...

  8. Python - 关于代码阅读的一些建议

    初始能力 让阅读思路保持清晰连贯,主力关注在流程架构和逻辑实现上,不被语法.技巧和业务流程等频繁地阻碍和打断. 建议基本满足以下条件,再开始进行代码阅读: 具备一定的语言基础:熟悉基础语法,常用的函数 ...

  9. python列表(list)的简单学习

    列表是由一系列按特定顺序排列的元素组成, 是 Python 中使用最频繁的数据类型.列表可以完成大多数集合类的数据结构实现.列表中元素的类型可以不相同,它支持数字,字符串甚至可以包含列表.字典(即嵌套 ...

  10. yolo_v3训练自己的模型(人脸及deep-sort)

    做deep-sort多目标跟踪需要结合yolo_v3进行检测行人 由于我的项目中需要对人脸进行检测,所以需要训练针对人脸的模型 训练样本是来自WIDER-FACE人脸库.(有3w+的图片和标注框) d ...