第七章 路由 75 路由传参-使用query方式传递参数
<!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?id=10&name=zs">登录</router-link>
<router-link to="/register">注册</router-link> <router-view></router-view>
</div> <script> var login={
template:'<h1>登录---{{$route.query.id}}---{{$route.query.name}}</h1>',
data(){
return{
msg:'123'
}
},
created(){//组件的生命周期
// console.log(this.$route)
console.log(this.$route.query.id) }
} var register={
template:'<h1>注册</h1>'
} var router = new VueRouter({
routes:[
{path:'/login',component:login},
{path:'/register',component:register}
]
}) //创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
msg:''
},
methods:{},
//router:router
router
});
</script>
</body>
</html>
第七章 路由 75 路由传参-使用query方式传递参数的更多相关文章
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- 第七章 路由 76 路由传参-使用params方式传递路由参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue-router路由传参之query和params
首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router.pu ...
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- vue 路由跳转传参
<li v-for="article in articles" @click="getDescribe(article.id)"> getDescr ...
- vue-router路由如何实现传参
tip: 用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空.(传参强烈建议适用string) 也可以选用sessionstorage/lo ...
- 脚本语言丨Batch入门教程第四章：调用与传参
今天是Batch入门教程的最后一章内容:调用与传参.相信通过前面的学习,大家已经掌握了Windows Batch有关的基础知识和编程方法,以及利用Windows Batch建立初级的编程思维方式.今后 ...
- 设置 Ext.data.Store 传参的请求方式
设置 Ext.data.Store 传参的请求方式 1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var res ...
- js方法用来获取路径传参上所带的参数
//js方法用来获取路径传参上所带的参数 function GetQueryString(param) { var reg = new RegExp("(^|&)" + p ...
随机推荐
- 【并行计算-CUDA开发】有关CUDA当中global memory如何实现合并访问跟内存对齐相关的问题
ps:这是英伟达二面面的一道相关CUDA的题目.<NVIDIA CUDA编程指南>第57页开始 在合并访问这里,不要跟shared memory的bank conflic ...
- maven 运行web工程
1.使用命令mvn package,将工程打包成war包 2.把war包放置到tomcat的webapps目录下,运行tomcat
- Vue:不同页面之间的传递参数--params
在嵌套vue-router情况下,不同页面之间传递参数可以通过params实现.而params传参分为两种情况: 1.参数在url中显示 首先你要确定自己要传的参数,并在控制路由的文件中的Router ...
- jdk1.8 -- stream 的使用
一.stream介绍 stream 是jdk 一个加强的api操作,翻译过来就是流的意思,主要是对Collection 集合的一些操作,流一但生成就会有方向性,类似于自来水管的水流一样,不可以重复使用 ...
- 【Python】【demo实验24】【练习实例】【打印图样】
原题: 打印出如下图案(菱形): * *** ***** ******* ***** *** * 我的源码: #!/usr/bin/python # encoding=utf-8 # -*- codi ...
- 倍增-RMQ问题Sparse-Table算法
提示 code: #include<bits/stdc++.h> #define ll long long #define inf 0x7fffffff using namespac ...
- Katu Puzzle POJ - 3678 （2 - sat）
有N个变量X1X1~XNXN,每个变量的可能取值为0或1. 给定M个算式,每个算式形如 XaopXb=cXaopXb=c,其中 a,b 是变量编号,c 是数字0或1,op 是 and,or,xor 三 ...
- 你不知道的css各类布局（三）之自适应布局
自适应布局 概念 自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称 自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局 ...
- js中神奇的东西
简单了解一些js的东西 window.history.go(-1);//历史记录-1,跳转到上一次操作的页面 Location 对象的 replace() 方法用于重新加载当前文档(页面) javas ...
- Access to XMLHttpRequest at 'http://localhost:8090/user/getotp' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
ajax跨域请求错误 解决: springboot中: 加注解 @CrossOrigin