博客地址: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. windows系统中配置多版本anaconda

    1.最好从国内的镜像站下载anaconda,国外那个站实在是太慢了,清华开源软件镜像站(https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/) 2.如 ...

  2. 用mplayer从视频中按周期提取帧

    使用方法:extract file time step folder time 设置时间长度 step 设置周期 均以秒(s)为单位 贡献:1. 从视频文件中周期性提取图片:2. Windows下批处 ...

  3. MyBatis配置C3P0连接池

    一.导包 c3p0包     mybatis包 数据库的连接包 二.继承UnpooledDataSourceFactory的类 Mybatis 没有帮开发者实现 c3p0 数据库连接池,故需要使用者自 ...

  4. Spring-AspectJ 配置文件

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  5. 数据库(mysql)相关知识

      单表查询   排序   升序   select*from表名 order by字段 asc;   降序   select*from表名 order by字段 desc;   条件查询(包括通配符) ...

  6. LeetCode刷题:第七题 整数翻转 第九题 回文数

    第七题题目描述: 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入 ...

  7. 【SP26073】DIVCNT1 - Counting Divisors 题解

    题目描述 定义 \(d(n)\) 为 \(n\) 的正因数的个数,比如 \(d(2) = 2, d(6) = 4\). 令 $ S_1(n) = \sum_{i=1}^n d(i) $ 给定 \(n\ ...

  8. Apache Sentry部署

    三台hadoop集群,分别是master.slave1和slave2.下面是这三台机器的软件分布: master:NameNode.ZK.HiveMetaSotre.HiveServer2.Sentr ...

  9. LabVIEW(二):计数器应用

    1.计数器结构 —>Gate Output—> Counter Register —>Source 其中: Source:被计数的输入源信号 Gate:切断计数是否启动的门控信号 O ...

  10. join和+的区别

    连接字符串的时候可以用join也可以用+,但这两者有没有区别呢? 我们先来看一下用join和+连接字符串的例子 str1 = " ".join(["hello" ...