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. nginx 添加代理

    1 确认安装路径 ps aux | grep nginx 2.进入配置目录 3.使用vi编辑配置文件 如果是新增,可以参考其他配置,5yy复制相应行,p粘贴,然后修改内容后:wq保存退出 4.验证配置 ...

  2. 学习小片段——springboot 错误处理

    一:先看看springboot默认的错误处理机制 springboot默认会判断是否是浏览器(http请求头Accept是否含有 text/html)来选择返回html错误页面或json错误信息 原因 ...

  3. String与StringBuffer之间的转换

    来源:http://www.oschina.net/code/snippet_2261089_47352 package demo; /* String与StringBuffer之间的转换 * Str ...

  4. 如何开发NPM包

    创建包目录 D:\>mkdir mypackage && cd mypackage D:\mypackage>npm init --yes 进入mypackage目录,你会 ...

  5. 玩转BLE(2)_使用bluepy扫描BLE的广播数据

    1. 前言 在linux平台下,bluez是一个很不错的软件,提供了很多基于命令行的测试工具,如hciconfig.hcitool.hcidump.bluetoothctl等.利用这些工具,我们可以方 ...

  6. dubbo could not get local host ip address will use 127.0.0.1 instead 异常处理

    dubbo could not get local host ip address will use 127.0.0.1 instead 查看hostname localhost:spring wls ...

  7. C++编程入门

    学习一门新的程序设计语言的最好方法就是练习编写程序. 每个C++程序都包含一个或多个函数,其中一个必须命名为main.操作系统通过调用main来运行C++程序. 一个函数定义包含四个部分:返回类型:函 ...

  8. Tomcat配置SSL后使用HTTP后跳转到HTTPS

    Tomcat配置好SSL后将HTTP请求自动转到HTTPS需要在TOMCAT/conf/web.xml的未尾加入以下配置: <login-config> <!-- Authoriza ...

  9. Spring源码学习笔记2

    1.默认标签的解析 对四种不同标签的解析 private void parseDefaultElement(Element ele, BeanDefinitionParserDelegate dele ...

  10. CSS学习笔记_day2

    目录 一. css初识 二. 在HTML里面引入css的几种方式 1. 外部引入式 2.文档内嵌式 3. 行内式(元素内嵌式) 三. 选择器 四.盒模型 五.文档标准流 六.浮动 一. css初识 1 ...