zoukankan      html  css  js  c++  java
  • Vue中关于路由传参query和params的区别

    路由配置:{path:'/login',name:'Login',component:Login},

      1.页面携带query参数跳转(path,name指定跳转到Login时都可以携带query参数) this.$router.push({ path:'/login',name:'Login', query: { id: this.id } ) query相当与发送了一次get请求,请求参数会显示在浏览器地址栏中

      2.页面携带params参数跳转(携带params参数跳转时只能使用name指定)

      this.$router.push({ name:'Login', params: { id: this.id } )

      params相当与发送了一次post请求,请求参数则不会显示,并且刷新页面之后参数会消失 当路由配置更改为

      路由配置:{path:'/login/:id',name:'Login',component:Login} 并且再次发送请求,请求数据不会随着页面的刷新而消失 获取请求参数 this.$route.params.id this.$route.query.id

      注: 

       router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。

      $router.push({path:'login'});本质是向history栈中添加一个路由,在我们看来是 切换路由,但本质是在添加一个history记录;

      而route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等

  • 相关阅读:
    opencv::绘制-基本几何
    公共盘访问方法(更改用户登录公共盘)
    testlink数据库访问密码修改
    SQL Server外部链接时报错:Error locating serverInstance specified
    SQL server数据库端口访问法
    python模块之wordcloud
    随性练习:python字典实现文本合并
    python模块之numpy
    python模块之openpyxl扩展
    python模块之openpyxl介绍
  • 原文地址:https://www.cnblogs.com/ylyw/p/13307615.html
Copyright © 2011-2022 走看看