第七章 路由 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 ...
随机推荐
- XCTF攻防世界Web之WriteUp
XCTF攻防世界Web之WriteUp 0x00 准备 [内容] 在xctf官网注册账号,即可食用. [目录] 目录 0x01 view-source2 0x02 get post3 0x03 rob ...
- MySQL知识篇-SQL2
1 数据库基本操作? (1) 查看数据库 show databases; (2)切换到指定的数据库 use dbname; (3)创建数据库 create database 库名 charset=ut ...
- 【并行计算-CUDA开发】关于共享内存（shared memory）和存储体(bank)的事实和疑惑
关于共享内存(shared memory)和存储体(bank)的事实和疑惑 主要是在研究访问共享内存会产生bank conflict时,自己产生的疑惑.对于这点疑惑,网上都没有相关描述, 不管是国内还 ...
- C++ min函数
min 是c++标准库头文件中的一个重要的函数.它的功能是一个最小值的函数,比较两个数值的大小,返回他们的之间最小值. #include <algorithm> int a=2; int ...
- 「java.util.concurrent并发包」之 CountDownLatch
一 CountDownLatch是什么 CountDownLatch是在java1.5被引入的,跟它一起被引入的并发工具类还有CyclicBarrier.Semaphore.ConcurrentHas ...
- T100——接口代码记录，jsonArray和json
{<section id="cs_t1client.description" >} #應用 a00 樣板自動產生(Version:) #+ Version..: T10 ...
- windows 控制台默认为UTF-8显示的方法
这里需要先了解些内容: CHCP CHCP是MS DOS中的命令,用来显示或设置活动代码页编号的.用法是: CHCP [nnn] 其中nnn指定的是代码页的编号.这个参数是可选的,在命令行下如果不指定 ...
- 【POI】使用POI 创建生成XLS，打开xls文件提示【此文件中某些文本格式可能已经更改，因为它已经超出最多允许的字体数。】
使用POI 创建生成XLS,打开xls文件提示[此文件中某些文本格式可能已经更改,因为它已经超出最多允许的字体数.] 原因: 是因为在POI处理xls的过程中,太多次调用了: HSSFFont fon ...
- python numpy 的用法——diag函数
当 np.diag(array) 中 array是一个1维数组时,结果形成一个以一维数组为对角线元素的矩阵 array是一个二维矩阵时,结果输出矩阵的对角线元素
- python之输入一系列整数输出最大值
在python学习中,我们经常会遇到:编写一个程序,输入若干整数或者是在一串字符中,输出最大值(数)的问题.那么在这里,我给出了几种常见的,也是几种比较常用的方法,希望能给大家的学习带来一定的帮助. ...