原文:https://blog.csdn.net/qq_40072782/article/details/82533477

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

通过路由跳转的三种方式

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

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

#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文件中

<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文件中

<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:‘/’ }类似,不再赘述  

  

vue中通过路由跳转的三种方式的更多相关文章

  1. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  2. 转 Velocity中加载vm文件的三种方式

    Velocity中加载vm文件的三种方式   velocitypropertiespath Velocity中加载vm文件的三种方式:    方式一:加载classpath目录下的vm文件 Prope ...

  3. Velocity中加载vm文件的三种方式

    Velocity中加载vm文件的三种方式: a.  加载classpath目录下的vm文件 /** * 初始化Velocity引擎 * --VelocityEngine是单例模式,线程安全 * @th ...

  4. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  5. React中使用 react-router-dom 路由传参的三种方式详解【含V5.x、V6.x】!!!

    路由传值的三种方式(v5.x) params参数 //路由链接(携带参数): <Link to='/demo/test/tom/18'}>详情</Link> //或 <L ...

  6. PHP 页面跳转的三种方式

    第一种方式:header() header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. 语法: void header ( string $string [, bool $re ...

  7. Vue中组件间传值常用的几种方式

    版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...

  8. Vue学习(二)-Vue中组件间传值常用的几种方式

    版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...

  9. Action 中获取表单数据的三种方式

    (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/53138905  冷血之心的博客) Action 中获取表单提交数据 ...

随机推荐

  1. 虚拟机Linux_Mint中安装vmtools增强工具

    一开始用VmwarePro安装Linux系统时,系统的整体界面会缩在屏幕中间的一小块区域内.如图: ​ 看的会非常吃力.为了更好的解决这个问题,就需要安装Vmtools增强工具.安装步骤如下: 1. ...

  2. ElasticSearch部署问题

    以下几个是以前在自己部署ElaticSearch的时候收集到的,认为有用的 https://my.oschina.net/topeagle/blog/591451?fromerr=mzOr2qzZ h ...

  3. 第2 章Python 语言基础

    必背必记 1.转义字符   Python 中的字符串还支持转义字符.所谓转义字符是指使用反斜杠“\”对一些特殊字符进行转义. \ 续行符 \n 换行符 \0 空 \t 水平制表符,用于横向跳到下一制表 ...

  4. linux正则表达式扩展部分

    扩展的正则表达式(Extended  Regular  Expressions): 使用的命令为:grep  -E以及egrep [了解即可] 1)+ 表示重复“一个或一个以上”前面的字符(*是0或多 ...

  5. 利用Filter解决跨域请求的问题

    1.为什么出现跨域. 很简单的一句解释,A系统中使用ajax调用B系统中的接口,此时就是一个典型的跨域问题,此时浏览器会出现以下错误信息,此处使用的是chrome浏览器. 错误信息如下: jquery ...

  6. TP5数据库操作方法总结

    一.TP5数据库操作方法 1.name()方法        作用 : 指定默认的数据表名(不含前缀)        示例 : Db::name('weiba_post');        返回 : ...

  7. Java中的接口和抽象类(转)

    在面向对象的概念中,我们知道所有的对象都是通过类来描述的,但是并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类往往用来表征我们在对问题 ...

  8. 闯越自动签到demo版补充说明

    demo代码:https://www.cnblogs.com/canmeng/p/11000548.html 定位出错是由于cookie 我重新登录账号过,cookies的值就变了 当时没注意cook ...

  9. Thread 小总结

    目录 线程概述 线程的定义 线程的启动 线程的状态 线程的方法属性 1.线程概述 线程是一个程序的多个执行路径,执行调度的单元,依托于进程的存在.线不仅可以共享进程的内在,而且还拥有一个属于自己的内存 ...

  10. git---gui使用

    1.登陆的命令: git config –global user.email "1455971532@qq.com" git config –global user.name &q ...