第七章 路由 76 路由传参-使用params方式传递路由参数
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
<script src="../lib/vue-router-3.0.6.js"></script>
</head> <body>
<div id="app">
<!-- 如果在路由中，使用查询字符串，给路由传递参数，则 不需要修改 路由规则的path属性 -->
<router-link to="/login/12/ls">登录</router-link>
<router-link to="/register">注册</router-link> <router-view></router-view>
</div> <script> var login={
template:'<h1>登录 --- {{$route.params.id}} --- {{$route.params.name}}</h1>',
data(){
return{
msg:'123'
}
},
created(){//组件的生命周期
console.log(this.$route.params.id)
// console.log(this.$route.query.id) }
} var register={
template:'<h1>注册</h1>'
} var router = new VueRouter({
routes:[
//:id，这里的:是占位符
{path:'/login/:id/:name',component:login},
{path:'/register',component:register}
]
}) //创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
msg:''
},
methods:{},
//router:router
router
});
</script>
</body>
</html>
第七章 路由 76 路由传参-使用params方式传递路由参数的更多相关文章
- 第七章 路由 75 路由传参-使用query方式传递参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue 路由的简单使用(命名路由、query路由传参、params路由传参)
1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- 设置 Ext.data.Store 传参的请求方式
设置 Ext.data.Store 传参的请求方式 1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var res ...
- Extjs 项目中常用的小技巧，也许你用得着(5)--设置 Ext.data.Store 传参的请求方式
1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var resultsPanel = Ext.create('Ex ...
- Shell传参的多种方式
Shell 传参的多种方式 使用$1 $2 这种类似占位符的方式 # 命令行调用 start.sh 8080 9090 # 脚本中获取 port1=$1 # 8080 port2=$2 # 9090 ...
- Tornado学习笔记(二) 路由/post/get传参
本章我们学习 Tornado 的路由传参等问题 路由 路由的匹配 Tornado的路由匹配采用的是正则匹配 一般情况下不需要多复杂的正则,正则的基本规则如下(站长之家) 举个例子 (r'/sum/(\ ...
- ionic简单路由及页面传参
1)页面跳转及传参方法 angular.module('app.routes', [])//routes路由模型 .config(function($stateProvider, $urlRouter ...
随机推荐
- OpenResty + Lua访问Redis，实现高并发访问时的毫秒级响应打回
一.lua中redis的配置依赖: 1.OpenResty的lua访问redis的插件:https://github.com/openresty/lua-resty-redis 二.下载后,导入对应的 ...
- 安装OpenCV：OpenCV 3.0、OpenCV 2.4.8、OpenCV 2.4.9 +VS 开发环境配置
1.下载和安装OpenCV SDK VS2010不用说,肯定都安装了吧.来说说当前最新的OpenCV版本2.4.8(2014年2月24日),2.4.9 (2014年4月)的下载和安装.与其说是 ...
- git 使用详解
Git学习文档: http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 git init ...
- OS X更新Catalina 10.15.2后虚拟机黑屏（已解决）
简述 问题:更新OS X 10.15.2后VM Ware进unbuntu 16.0黑屏,但是VM Ware 有显示,情况类似如下: 解决办法 重启系统,command+r 进入恢复模式,打开bas ...
- 什么是阿里云ACA认证
阿里云云计算助理工程师认证(ACA - Alibaba Cloud Certified Associate)是面向使用阿里云基础产品的专业技术认证,主要涉及阿里云的计算.存储.网络.安全类的核心产品 ...
- 【LOJ】#3086. 「GXOI / GZOI2019」逼死强迫症
LOJ#3086. 「GXOI / GZOI2019」逼死强迫症 这个就是设状态为\(S,j\)表示轮廓线为\(S\),然后用的1×1个数为j 列出矩阵转移 这样会算重两个边相邻的,只要算出斐波那契数 ...
- Codeforces Round #309 (Div. 1)
A. Kyoya and Colored Balls 大意: 给定$k$种颜色的球, 第$i$种颜色有$c_i$个, 一个合法的排列方案满足最后一个第$i$种球的下一个球为第$i+1$种球, 求合法方 ...
- hdu 6025（女生赛）
典型的用空间换取时间的思想 关键要理解多个数怎么算最小公倍数 用一个前缀 一个后缀 然后枚举去掉的点就可以了 #include <iostream> #include <cstdio ...
- element-ui table float类型数据排序失败
背景:对于16.88这样的数据,点击表头排序无效,仍然是乱序 解决办法:自定义排序方法,:sortable="true" :sort-mothod="xxxx" ...
- 树莓派3B+和3B 安装64位debian GUN/Linux系统
请直接参考如下博客: https://blog.csdn.net/u013451404/article/details/80710136 如果是3B的树莓派用户,只需要把第一个分区boot里的.dtb ...