vue vue-route 传参 $route.params
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue-router</title> </head> <body> <div id="app"> <!-- a href=# v-link="{path:'login'}">登录</a> <a href=# v-link="{path:'register'}">注册</a> --> <!-- --><!--version vue .0占位--> <!-- vue --> <router-link to="/login">login</router-link> <router-link to="/register">register</router-link> <router-view></router-view> </div> <link rel="stylesheet" href="./dist/css/bootstrap.css"> <script src="vue.js"></script> <script src="vue-router.js"></script> <script src="vue-resource1.5.1.js"></script> <script type="text/javascript"> //开始路由代码的编写 var App= Vue.extend({}); // var login=Vue.extend({ // tempate:'<h1>登录页面</h1>' // }); // var register=Vue.extend({ // tempate:'<h1>注册页面</h1>', // data(){ // return{ // id:1, // uname:'', // upwd:'' // } // }, // created:function(){ // this.id=this.$route.params.id; // } // }); const login={ template:'<h1>this is login {{ $route.params.msg }}</h1>', data(){ return{ msg:'参数传递' } } }; const register={ template:'<h1>this is register {{ $route.params.uname}}-{{ $route.params.upwd}}</h1>', data(){ return{ uname:'用户名', upwd:'用户密码' } } }; //设置路由规则 //vue version 1.0 //var router =new VueRouter(); // router.map({ // 'login':{component:login}, // 'register/:uname/:upwd':{component:register} // }); //开启路由 // router.start(App) //默认跳转到 login // router.redirect('/':'/login'); //传参 //vue version 2 routes=[ {path:'/login/:msg',component:login}, {path:'/register/:uname/:upwd',component:register} ] var router =new VueRouter({routes}); // router.redirect('/':'login'); const app=new Vue({ router }).$mount('#app'); </script> </body> </html>
vue vue-route 传参 $route.params的更多相关文章
- vue路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...
- 18 vue 动态路由传参
params形式 http://192.168.1.100:8080/#/infoDetailed/231 //定义路由{ path: "/infoDetailed/:newsId" ...
- vue 路由 URL传参
源码如下: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //全局使用该组件 const ro ...
- vue $router.push 传参的问题
$router 和 $route的区别 $route为当前router跳转对象里面可以获取name.path.query.params等 $router为VueRouter实例,想要导航到不同URL, ...
- vue 父子组件传参
父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...
- vue的router-link传参问题
一般来说,可以通过查询字符串的方式将参数传过去,方法如下: <router-link :to="{path:'/Detail', query:{ name: id }}"&g ...
- Angular route传参
从 router-link-page1 跳转 router-link-page2 和 router-link-page3 通过自定义路由 设置router-link-page2的路由后有3个参数,pa ...
- Vue路由query传参
1.不要进行过深的嵌套 let id = 'uyu' this.$router.push({ path: '/mrp_detail', query: { re_order_id: id, option ...
- vue router使用query和params传参的使用
传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...
- 8、vue路由跳转 params与query 路由传参
params与query router文件下index.js里面,是这么定义路由的: { path: '/about', name: 'About', component: About } 用quer ...
随机推荐
- Webservice之axis
根据wsdl的url,使用axis1.4生成客户端,并且对webservice进行调用 1.到www.apache.org上去下载axis-bin-1_4.zip,如要关联源代码就把axis-sr ...
- python递归、collections系列以及文件操作进阶
global log 127.0.0.1 local2 daemon maxconn log 127.0.0.1 local2 info defaults log global mode http t ...
- C# 获取汉字转拼音缩写-简写,不是全拼
///<summary> /// 汉字转拼音缩写 /// Code By ] -'\0')); if ( i <0xB0A1) return"*" ...
- Docker网络及命令
Docker常用命令 docker version #查看版本 docker search centos #搜索可用docker镜像 docker images 查看当前docker所有镜像 dock ...
- div下面多个a标签的点击事件,并且获取a的属性
$('.fensiselect').on('click','a',function(){ var id= $(this).attr('fanid'); alert(id) })
- css-background-image 背景图片太大或太小
.zoomImage { background-image:url(images/yuantiao.jpg); background-rep ...
- 如何区分Java中的方法重载和重写
首先说的是重载: 方法的重载 * 在同一个类中,方法名相同,参数列表不同.与返回值类型无关. * 参数列表不同: * A:参数个数不同 * B:参数类型不同 * C:参数的顺序不同(不算重载 报错) ...
- 问题; No label views point to this text field with an android:labelFor="@+id/@+id/editTextNumber1" attribute
设置完EditText的ID后老是报一个警告. 解决方法: 需要在EditText属性中添加inputType和labelFor两个属性.其中labelFor属性的值与id值相同即可
- Mysql 数据库 创建与删除(基础2)
创建数据库 语法: 注意:创建数据库时可以指定编码(如: create database mydb123 default charset utf8; ) pyvip@Vip:~$ mysql -uxl ...
- pytest 学习笔记一:参数化与组织分层
组织分层: 1.普通方式,和unittest分层类似: setup_module() # 通常放在类外 setup_class(cls) setup(self) teardown(self) tea ...