vue学习:7、路由跳转

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

    <body><div id="app"></div></body><script type="text/javascript">var Login = {template: `<div>我是登陆界面</div>`};var Register = {template: `<div>我是注册界面</div>`};<!-- 2:按照插件 -->Vue.use(VueRouter);<!-- 3:创建路由对象 -->var router = new VueRouter({<!-- 4:配置路由对象 -->routes: [{ name:'login', 	path: '/login',		component: Login}, { name:'register',	path: '/register',	component: Register	}]});<!-- 6:指定路由改变局部的位置 -->var App = {template: `<div><!-- vue-router内置组件 --><!-- <router-link to="/login">登录去</router-link><router-link to="/register">注册去</router-link> --><!-- to 前没有冒号 就字符串处理了 --><router-link :to="{name:'login'}">登录去</router-link><router-link :to="{name:'register'}">注册去</router-link><!-- 显示跳转页面 --><router-view></router-view></div>`}new Vue({el: '#app',router: router,components: {app: App},template: '<app/>'})</script>

传参与嵌套

    <body><div id="app"></div></body><script type="text/javascript">// 1: router-view 中包含 router-view// 2: 路由规则中存在子路由var Login = {template: `<div>这里是Login界面,下面是子界面<hr><!-- 显示跳转页面 --><router-view></router-view></div>`,created: function() {console.log(this.$route.query);console.log(this.$route.query.id + ' ' + this.$route.query.name);}};var Register = {template: `<div>我是注册界面</div>`,created: function() {console.log(this.$route.params);console.log(this.$route.params.name);}};var Woman={template:`<div>女的</div>`}var Man={template:`<div>男的</div>`}var Boy={template:`<div>小屁孩</div>`}<!-- 2:按照插件 -->Vue.use(VueRouter);<!-- 3:创建路由对象 -->var router = new VueRouter({<!-- 4:配置路由对象 -->routes: [{<!--保证 /login 显示login组件  -->name: 'login',path: '/login',component: Login,<!-- 保证/login/abc 显示abc -->children:[{name: 'login.woman',path: 'woman',component: Woman},{name: 'login.man',path: 'man',component: Man},{name: 'login.boy',path: 'boy',component: Boy}]},{name: 'register',path: '/register/:name',component: Register}]});<!-- 6:指定路由改变局部的位置 -->var App = {template: `<div><!-- vue-router内置组件 --><!-- <router-link to="/login">登录去</router-link><router-link to="/register">注册去</router-link> --><!-- to 前没有冒号 就字符串处理了  --><!-- query:{id:1} --><!-- params:{name:'abc'} --><router-link :to="{name:'login.woman'}" >女</router-link><router-link :to="{name:'login.man'}" >男</router-link><router-link :to="{name:'login.boy'}" >小屁孩</router-link><router-link :to="{name:'login',query:{id:1,name:'ddd'}}" >登录去</router-link><router-link :to="{name:'register',params:{name:'abc'}} "  >注册去</router-link><!-- 显示跳转页面 --><router-view></router-view></div>`}new Vue({el: '#app',router: router,components: {app: App},template: '<app/>'})</script>

 

转载于:https://my.oschina.net/qingqingdego/blog/2873891

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/450270.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Retry 重试机制实现及原理

概要 Spring实现了一套重试机制&#xff0c;功能简单实用。Spring Retry是从Spring Batch独立出来的一个功能&#xff0c;已经广泛应用于Spring Batch,Spring Integration, Spring for Apache Hadoop等Spring项目。本文将讲述如何使用Spring Retry及其实现原理。 背景 重试&…

inline 内联函数详解 内联函数与宏定义的区别

一、在C&C中   一、inline 关键字用来定义一个类的内联函数&#xff0c;引入它的主要原因是用它替代C中表达式形式的宏定义。表达式形式的宏定义一例&#xff1a;#define ExpressionName(Var1,Var2) ((Var1)(Var2))*((Var1)-(Var2))为什么要取代这种形式呢&#xff0c;且…

Oracle序列更新为主键最大值

我们在使用 Oracle 数据库的时候&#xff0c;有时候会选择使用自增序列作为主键。但是在开发过程中往往会遇到一些不规范的操作&#xff0c;导致表的主键值不是使用序列插入的。这样在数据移植的时候就会出现各种各样的问题。当然数据库主键不使用序列是一种很好的方式&#xf…

dubbo forbid service的解决办法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 017-05-31 10:36:54.523 [http-nio-8080-exec-5] ERROR c.h.pdl.web.APIExceptionHandler - Unknown Exception, URI /payday-loan-co…

用SSH登录远程的机器,在远程机器上执行本地机器上的脚本

假设本地的机器IP为10.245.111.90&#xff0c;我们想要在10.245.111.93上执行一个保存在10.245.111.90上的脚本。经过测试通过的命令如下&#xff1a;ssh root10.245.111.93 bash -s < /root/testlocal.sh如果要带参数的话&#xff0c;那就需要参考这篇文章中描述的代码了。…

golang学习之旅(1)

这段时间我开始了golang语言学习&#xff0c;其实也是为了个人的职业发展的拓展和衍生&#xff0c;语言只是工具&#xff0c;但是每个语言由于各自的特点和优势&#xff0c;golang对于当前编程语言的环境&#xff0c;是相对比较新的语言&#xff0c;对于区块链&#xff0c;大数…

为什么要在Linux平台上学C语言?用Windows学C语言不好吗?

用Windows还真的是学不好C语言。C语言是一种面向底层的编程语言&#xff0c;要写好C程序&#xff0c;必须对操作系统的工作原理非常清楚&#xff0c;因为操作系统也是用C写的&#xff0c;我们用C写应用程序直接使用操作系统提供的接口&#xff0c;Linux是一种开源的操作系统&am…

数据库中Schema(模式)概念的理解

在学习SQL的过程中&#xff0c;会遇到一个让你迷糊的Schema的概念。实际上&#xff0c;schema就是数据库对象的集合&#xff0c;这个集合包含了各种对象如&#xff1a;表、视图、存储过程、索引等。为了区分不同的集合&#xff0c;就需要给不同的集合起不同的名字&#xff0c;默…

linux系统中打rz命令后出现waiting to receive.**B0100000023be50

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 linux系统中打rz命令后出现 waiting to receive.**B0100000023be50 而没有出现选择文件弹出框是什么问题&#xff1a; 我本来用的是 gi…

golang学习之旅(2)- go的数据基本数据类型及变量定义方式

叮铃铃&#xff0c;这不有人在评论问下一篇何时更新&#xff0c;这不就来了嘛&#xff0c;&#x1f604; 今天我们说说golang 的基本数据类型 基本类型如下&#xff1a; //基本类型 布尔类型&#xff1a;bool 即true 、flase 类似于java中的boolean 字符类型&#xff1a;s…

StackExchange.Redis 官方文档(六) PipelinesMultiplexers

流水线和复用 糟糕的时间浪费。现代的计算机以惊人的速度产生大量的数据&#xff0c;而且高速网络通道(通常在重要的服务器之间同时存在多个链路)提供了很高的带宽&#xff0c;但是计算机花费了大量的时间在 等待数据 上面&#xff0c;这也是造成使用持久性链接的编程方式越来越…

开发优秀产品的六大秘诀

摘要&#xff1a;本文是Totango的联合创始人兼公司CEO Guy Nirpaz发表在Mashable.com上的文章。无论是在哪个行业&#xff0c;用户永远是一款产品的中心&#xff0c;本文作者就以用户为中心&#xff0c;为大家讲述了六个如何为企业产品添加功能的秘诀。 随着云计算的发展&#…

Spring Boot下无法加载主类 org.apache.maven.wrapper.MavenWrapperMain问题解决

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 引言&#xff1a; 在SpringBoot中需要使用mvnw来做相关操作&#xff0c;但是却有时候会报出达不到MavenWrapperMain的错误信息&#xff…

【前端面试】字节跳动2019校招面经 - 前端开发岗(二)

【前端面试】字节跳动2019校招面经 - 前端开发岗&#xff08;二&#xff09; 因为之前的一篇篇幅有限&#xff0c;太长了看着也不舒服&#xff0c;所以还是另起一篇吧?一、 jQuery和Vue的区别 jQuery 轻量级Javascript库Vue 渐进式Javascript-MVVM框架jQuery和Vue的对比 jQuer…

SpringBoot与SpringCloud的版本说明及对应关系

转载原文地址&#xff1a;https://github.com/alibaba/spring-cloud-alibaba/wiki/%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E

leetcode 8: 字符串转整数(atoi)

实现 atoi&#xff0c;将字符串转为整数。 该函数首先根据需要丢弃任意多的空格字符&#xff0c;直到找到第一个非空格字符为止。如果第一个非空字符是正号或负号&#xff0c;选取该符号&#xff0c;并将其与后面尽可能多的连续的数字组合起来&#xff0c;这部分字符即为整数的…

优秀产品页设计:将访问者转化成客户

摘要&#xff1a;本文是对外文《 Better Product Pages: Turn Visitors Into Customers 》的翻译&#xff0c;编译内容如下&#xff1a; 展示产品、服务的方法是其获得成功的关键。在Web上&#xff0c;你留给用户的第一印象是至关重要的。 如果有人访问你的网站&#xff0c;一定…

计算机网络学习方法

原文见&#xff1a;http://blog.csdn.net/qq_33506160/article/details/51872708 一、网络课程究竟难在哪&#xff1f; 1&#xff0e;内容比较乱 如果把《计算机网络技术基础》看做是一本计算机网络导论方面的教材&#xff0c;就不会认为乱了&#xff0c;因为导论就是为了解决知…

小程序类似抖音视频整屏切换

更新 现在已经更新了github地址和效果gif&#xff0c;可在文章最后查看。如果我的代码对你有用&#xff0c;请帮我随手star一下。 需求 最近在项目中需要加一个功能&#xff0c;在小程序中将已有的短视频功能&#xff0c;按照抖音的方式来浏览&#xff0c;整屏&#xff0c;可上…

Coding For Fun 32小时:充满创造、激情、团结的编程马拉松

摘要&#xff1a;Coding for Fun大赛是2012中国软件开发者大会&#xff08;SDCC&#xff09;的重要环节。由六名黑马学员组成的“天翼二队”&#xff0c;经过32小时的“血拼”&#xff0c;凭大赛作品“语音控”&#xff0c;获得了本次大赛的“最佳设计奖”。本文是该队队员的参…