文档章节

vue中通过路由跳转的三种方式

d
 dragon_tech
发布于 07/12 15:41
字数 500
阅读 78
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

router-view 实现路由内容的地方,引入组件时写到需要引入的地方
需要注意的是,使用vue-router控制路由则必须router-view作为容器。

通过路由跳转的三种方式

1、router-link 【实现跳转最简单的方法】

<router-link to='需要跳转到的页面的路径>
浏览器在解析时,将它解析成一个类似于<a> 的标签。

1
2
3
4
#div和css样式略
     <li >
         <router-link to= "keyframes" >点击验证动画效果 </router-link>  
      </li>

别忘记给需要跳转的路径在需要提前在router/index.js下引入哦。  

2、this.$router.push({ path:’/user’})
常用于路由传参,用法同第三种

区别:

1.query引入方式
params只能用name来引入路由
而query 要用path引入

2.query传递方式
类似于我们ajax中get传参,在浏览器地址栏中显示参数
params则类似于post,在浏览器地址栏中不显示参数

在helloworld.vue文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
.....
<li @click= "change" >验证路由传参</li>
</template>
 
<script>
export  default   {
   data () {
     return   {
       id:43,   //需要传递的参数
     }
   },
   methods:{
     change(){
       this .$router.push({   //核心语句
         path: '/select' ,    //跳转的路径
         query:{            //路由传参时push和query搭配使用 ,作用时传递参数
           id: this .id , 
         }
       })
     }
   }
}
</script>

在select.vue文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
   < select >
           <option value= "1"   selected= "selected" >成都</option>
           <option value= "2" >北京</option>
       </ select >
</template>
 
<script>
     export  default {
         data(){
             return {
                 id: '' ,
             }
         },
         created(){   //生命周期里接收参数
             this .id =  this .$route.query.id,   //接受参数关键代码
             console.log( this .id)  
         }
     }
</script>

3、this.$router.replace{path:‘/’ }类似,不再赘述  

d
粉丝 6
博文 630
码字总数 16178
作品 0
西安
私信 提问
加载中
请先登录后再评论。
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
22
树莓派(Raspberry Pi):完美的家用服务器

自从树莓派发布后,所有在互联网上的网站为此激动人心的设备提供了很多有趣和具有挑战性的使用方法。虽然这些想法都很棒,但树莓派( RPi )最明显却又是最不吸引人的用处是:创建你的完美家用...

异次元
2013/11/09
6.9K
8
opm-server-mirror

代码更新 2009-11-25: 加入反爬虫功能。直接Web访问服务器将跳转到Google。 使用方法 下载index.zip 解压index.zip得到index.php 将index.php传到支持php和cURL的国外服务器上 打开 http:/...

luosheng86
2013/01/29
1K
0
轻量级PHP框架--MonkeyPHP

MonkeyPHP(简称 MK)是一个完全面向对象的轻量级 PHP 框架!主要特点: 一、目录规范,容易部署。 二、支持 MVC 和 REST 等web架构。 三、路由既高效强大,又易于定制。 四、松耦合设计,易...

shalalal
2012/10/23
2.1K
0
浏览器中的scheme解释器--SchemeScript

一个用javascript实现的scheme解释器,可以运行在浏览器中或node.js中。 刚刚看到编译原理与实践第二章,一时兴起,想写个以前就想写的scheme的解释器。昨天晚上开始写,到刚才为止,接近一天...

zoowii
2012/11/01
1.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

这是对我最大的认可和鼓励

这是程序员cxuan的第18篇原创分享 可能一些小伙伴们不太清楚是怎么回事,是这样的。 我最近肝了三本 PDF,分别是 《Java核心技术总结》、《HTTP核心总结》、《程序员必知的硬核知识》、目录如...

osc_nc5ghpm9
29分钟前
0
0
折叠屏丨华为专家深度解读折叠屏连续性和拖拽适配介绍

折叠屏手机的出现,满足了用户对大屏幕的追求,但卓越的用户体验更离不开应用的适配与功能创新。距离Mate X面世已经一年的时间,应用适配情况如何?在适配过程中有哪些经验可以参考?有没有常...

软件绿色联盟
今天
0
0
一个 static 还能难得住我?

这是程序员cxuan的第15期原创分享 static 是我们日常生活中经常用到的关键字,也是 Java 中非常重要的一个关键字,static 可以修饰变量、方法、做静态代码块、静态导包等,下面我们就来具体聊...

osc_p23q7y3z
31分钟前
23
0
高中生写LOL外挂1年狂赚500万,落网前刚买下120万保时捷...

点击“开发者技术前线”,选择“星标🔝” 在看|星标|留言, 真爱 来源:交汇点| 编辑:可可 2020年3月,泰州姜堰警方接到一起特殊的报警:一名游戏玩家向民警反映,自己在玩英雄联盟对战时输...

开发者技术前线
今天
4
0
一次简单的服务器 cpu 占用率高的快速排查实战

前两天,朋友遇到一个线上 cpu 占用率很高的问题,我们俩一起快速定位并解决了这个问题。在征求朋友同意后,特发此文分享整个过程。本文以对话的形式展开,加上我的内心独白。文中对话与实际...

osc_emo7t12i
33分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部