vue 路由的作用,页面有参数和无参数跳转

无参数跳转:

使用路由标签跳转:

通过路由路径跳转:

<router-link :to="{path:‘/fruit/apple‘}">apple</router-link>

此时的path就是注册路由时的path,也就是路由的路径。
可以简写为。

<router-link to="/fruit/apple">apple</router-link>

通过路由名称跳转:

<router-link :to="{name:‘apple‘}">apple</router-link>
此时的name就是注册路由时的name,也就是路由的名称。
用路由跳转的方式会给要跳转的元素加上a标签,可以通过tag属性,自定义跳转元素的标签

<router-link tag="button" :to="{path:‘/fruit/apple‘}">apple</router-link>
此时跳转元素为button
<router-link tag="span" :to="{name:‘apple‘}">apple</router-link>
此时跳转元素为span

使用使用methods跳转:

<button @click="fn">apple</button>

methods: {
  fn: function () {
    this.$router.push({ path: 'fruit/apple' })
    this.$router.push({ name: 'apple' })
  }
}

有参数跳转:

使用路由标签跳转

<router-link :to="{path:'/fruit/apple',query:{msg:this.msg}}">apple</router-link>
<router-link :to="{name:'apple',params:{msg:this.msg}}">apple</router-link>

其中queryparams为传递的参数。

使用methods跳转

<button @click="fn">apple</button>

methods: {
  fn: function () {
    this.$router.push({ path: 'fruit/apple', query: { msg: this.msg } })
    this.$router.push({ name: 'apple', params: { msg: this.msg } })
  }
}

子页面接收父页面参数:

data () {
  return {
    // query接收参数
    aaa: this.$route.query.msg,
    // params接收参数
    bbb: this.$route.params.msg
  }
}

跳转的时候用的是this.$ router,接收的时候用的是this.$ route

query传参和params传参的区别:

1.query传参配置的是path,而params传参配置的是name

     query传参后的页面地址:参数会显示在地址栏(相当于get)

http://localhost:8082/#/fruit/apple?msg=Welcome%20to%20Your%20Vue.js%20App
params传参后的页面地址:参数不会显示在地址栏(相当于post)
http://localhost:8082/#/fruit/apple

2.params传参刷新会无效,但是query会保存传递过来的值,刷新不变

如果我又想让传的值不显示在地址栏,又想让传的值刷新页面后不消失,使用vuex.

原文地址:https://www.cnblogs.com/heson/p/10523084.html

时间: 2024-11-05 18:57:49

vue 路由的作用,页面有参数和无参数跳转的相关文章

vue 路由的作用,视图渲染

视图渲染 路由出了页面跳转这个功能以外,还有一个功能,那就是视图渲染. 简单点说,就是在页面加载的时候,通过配置好的路由路径,将对应好的模块渲染到页面. 我们通过router-view标签,来指定渲染的位置. 举例说明. 在router目录下的index.js文件配置路由. // 导入模块 import apple from '@/components/apple' // 配置路由 export default new Router({ routes: [{ path: '/', name: '

vue路由传参页面刷新参数丢失问题解决方案

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

python装饰器同时支持有参数和无参数的练习题

''' 预备知识: …… @decorator def f(*args,**kwargs): pass # 此处@decorator  等价于 f = decorator(f) @decorator2(*args,**kwargs) def f2(*args,**kwargs): pass # 此处@decorator2(*args,**kwargs)  等价于: 第一步,执行函数decorator2(*args,**kwargs),获得中间结果temp;  第二步,执行装饰器函数(即@temp

$Django 路飞之小知识回顾,Vue之样式element-ui,Vue绑定图片--mounted页面挂载--路由携带参数

一 小知识回顾 1 级联删除问题 2 一张表关联多个表,比如有manytomanyfileds forignkey,基于对象查询存在的问题:反向查询的时候  表名小写_set.all()不知是哪个字段queryset对象  所以说related_name='coursedetail_by' 3 Vue生命周期钩子可以直接发axios 二 Vue样式用elemen(jq用bootstap) 网站http://element-cn.eleme.io/#/zh-CN/guide/design 1 em

vue路由导航守卫及前置后置钩子函数参数详解

首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' Vue.use(Router) const router = new Router({ routes: [{ path: '/', name: 'HelloWorld', component: resolve => require

Vue - 路由传递参数

Vue 2.0  路由传递参数 Vue 路由传递参数 有两种方式: 一.用name传递参数 两步完成用name传值并显示在模板里: 在路由文件src/router/index.js里配置name属性. 1 2 3 4 5 6 7 routes: [ { path: '/', name: 'Hello', component: Hello } ] 模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示: 1 <p>{{ $route.name}}</p&

vue路由获取路由参数

vue路由设置路由参数有2种方式: 1.通过query配置: <router-link :to="{ name:'login',query:{id:1} }">登录</router-link> 通过query配置的路径显示如下: 2.通过params配置: <router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link> 通过qu

Vue路由传递参数详细说明

前言:最近我跟同事在做一个BI系统,采用前后端分离.整个系统包括数据分析系统.运营支持.系统设置等多个子系统.数据分析系统其实就是做各种数据报表.数据统计.实时数据的系统,这里面其实整个页面就是一个模板,最上面是filter.第二级是统计图.最下面是table数据.所以在数据分析子系统中,只要配置一个路由就可以匹配所有页面,在系统中,我把这个为公用路由.至于公用路由权限如何鉴定其实很简单:获取到用户权限列表后,渲染出所有的权限菜单,但注意每次跳转时一定要进行权限校验,具体原因自行思考.说着有点跑

Vue路由传参及传参后刷新导致参数消失处理

参考:https://blog.csdn.net/qq_43103581/article/details/82260073(vue 路由传递参数,刷新页面后参数丢失) 项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那么返回必然会重新拉取数据),一路百度,刚开始使用 this.$router.push({name:'list', params:{i