1.不带参数的路由配置 及 跳转

//路由配置:

{

name: "a",
path: "/a",
component: a
}
 
页面跳转:
this.$router.push('/a');  
this.$router.push({path:'/a'});
this.$router.push({name:'a'})
 
2.带参数的路由配置及页面跳转 和 接收参数

//路由配置:

{

name: "a",
path: "/a/:userid",
component: a
}
//页面跳转:
this.$router.push({name:'a',params:{userid:123}});    接收: this.$route.params.userid
this.$router.push({path:'/a',params:{userid:123}})   错误,如果提供了 pathparams 会被忽略
this.$router.push({path:'/a/123'});                             接收: this.$route.params.userid
 
this.$router.push({path:'/a?userid=123'})  接收:this.$route.query.userid  ----- 这一项的路由配置 path:'/a' ,不用带参数
 this.$router.push({path:'/a',query:{userid:123}})         接收: this.$route.query.userid ----- 这一项的路由配置 path:'/a' ,不用带参数
 
 
 
 
 
 

vue 路由配置的更多相关文章

  1. vue路由配置,vue子路由配置

    上一篇关于vue环境配置已经写好了!按照操作就行了! 现在一个项目已经部署完成,接下来我们从路由开始! 还记得在初始化项目的时候,有提示是否需要安装vue-router,对没错,vue中路由全靠它! ...

  2. npm vue路由配置

    npm vue路由 复习:1.README.md文件:保存如何使用的命令 (1)     npm install:拷项目时可以不拷node_modules文件,运行该命令时,会自动下载node_mod ...

  3. 【原创】一篇学会vue路由配置 、 动态路由 、多层路由(实例)

    先来看看效果图: 为了方便讲解,我没有使用vue脚手架,如果需要的,可以留言跟我要.不多说开工: 首先,html先组上 <div id="app"> <div&g ...

  4. Vue 路由配置、动态路由

    1.安装 npm install vue-router --save / cnpm install vue-router --save 2.引入并 Vue.use(VueRouter) (main.j ...

  5. vue路由配置

    1.安装 npm install vue-router --save / cnpm install vue-router --save 2.引入并 Vue.use(VueRouter) (main.j ...

  6. Vue路由配置history模式

    我的博客: https://github.com/Daotin/fe-notes/issues vue需要node.js吗? 你可以用 script 标签的形式引入vue.min.js 这样的,不需要 ...

  7. Vue 路由模块化配置

    博客地址:https://ainyi.com/77 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化 分享两个解决方案 -- Vue 路由配置 ...

  8. vue 路由 以及默认路由跳转

    https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...

  9. vue 子目录配置,负载均衡 nginx

    1. 我使用的是,腾讯云做负载均衡. 负载均衡配置: https://www.xxxx.com/vue   域名指向的服务器地址:10.10.10.10:80/vue 2. nginx 配置: ser ...

随机推荐

  1. 日积月累--线程中断interrupt()方法

    线程中断方法interrupt()方法的理解: interrupt()方法的源码: interrupted()方法的源码及注解: isInterrupted()方法源码及注解: 在了解这个方法之前我们 ...

  2. windows下安装memcached,报错:Failed to ignore SIGHUP RESULT too large

    小平板不想装虚拟机, 但是却跑不起memcached 网上虽有解决方案,但都只有一条命令, 没有出处. 翻了半天, 找到这个连接 https://commaster.net/content/insta ...

  3. Javascript学习一数据类型

    1.介绍js的基本数据类型 Undefined.Null.Boolean.Number.String (1) Undefined和Undifined区别 null是一个表示"无"的 ...

  4. js string类型时间转换成Date类型

    方法一: var t = "2015-03-16";var array =  t.split("-");var dt = new Date(array[0], ...

  5. caog

    import pandas as pd#匹配可发库存1. import oslst=os.listdir(r'E:\每日必做\琪琪小象库存')lst1=[]for i in lst: if i[:2] ...

  6. 剑指Offer 60. 把二叉树打印成多行 (二叉树)

    题目描述 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行. 题目地址 https://www.nowcoder.com/practice/445c44d982d04483b04a54f ...

  7. python初识模块

    sys import sys   print(sys.argv)     #输出 $ python test.py helo world ['test.py', 'helo', 'world']  # ...

  8. C# 对结构体和指针的使用

    //结构体的定义 [StructLayoutAttribute(LayoutKind.Sequential, CharSet = CharSet.Ansi, Pack = 1)]        pub ...

  9. 页面布局 ——图片自动按比例显示&&图片随外部div的增大而按比例增大

    图片按比例显示,分为两种情况. 1.空的div内加图片 <div class="emty"><img src="img/my.png"> ...

  10. webstorm 2018 LICENSE SERVER 最新激活网址

    2018年8月更新:https://s.tuzhihao.com:666 (亲测)