路由器的四种参数都是啥？

Posted 2023-03-08

是的，都是插网线的，没有区别，有区别的是WAN口这个是接进网线的， 参考技术A 这篇文章主要介绍了vue 路由跳转四种方式 (带参数)，本文通过实例代码给大家介绍的详细，具有一定的参考借鉴价值,需要的朋友可以参考下
1. router-link

1. 不带参数
<router-link :to="name:'home'">
<router-link :to="path:'/home'"> //name,path都行, 建议用name
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
2.带参数
<router-link :to="name:'home', params: id:1">
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
<router-link :to="name:'home', query: id:1">
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id
2. this.$router.push() (函数里面调用)
1. 不带参数
this.$router.push('/home')
this.$router.push(name:'home')
this.$router.push(path:'/home')
2. query传参
this.$router.push(name:'home',query: id:'1')
this.$router.push(path:'/home',query: id:'1')
// html 取参 $route.query.id
// script 取参 this.$route.query.id
3. params传参
this.$router.push(name:'home',params: id:'1') // 只能用 name

// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

3. this.$router.replace() (用法同上,push)

4. this.$router.go(n) ()

this.$router.go(n)

向前或者向后跳转n个页面，n可为正整数或负整数

ps : 区别

this.$router.push

跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace

跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n)

向前或者向后跳转n个页面，n可为正整数或负整数
总结

以上所述是小编给大家介绍的详解vue 路由跳转四种方式 (带参数)，希望对大家有所帮助

vue-router传参的四种方式超详细

vue路由传参的四种方式

一、router-link路由导航方式传参

父组件：<router-link to="/跳转到的路径/传入的参数"></router-link>
子组件：this.$route.params.content接受父组件传递过来的参数

例如：
路由配置：

bashbashpath:'/father/son/:num',name:A,component:A```

地址栏中的显示：

http://localhost:8080/#/father/son/44

调用方法：

<router-link to="/father/son/传入的参数">父亲组件<router-link>
 子组件通过  this.$route.params.num 接受参数

二、调用$router.push实现路由传参

父组件：通过实践触发，跳转代码

<button @click="clickHand(123)">push传参</button>
  methods: 
    clickHand(id) 
      this.$router.push(
        path: `/d/$id`
      )
    
  

路由配置

path: '/d/:id', name: D, component: D

地址栏中显示：

http://localhost:8080/d/123

子组件接受参数方式

mounted () 
  this.id = this.$route.params.id

三、通过路由属性name匹配路由，再根据params传递参数

父组件：

<button @click="ClickByName()">params传参</button>
    ClickByName() 
      this.$router.push(
        name: 'B',
        params: 
          context: '吴又可吴又可吴又可'
        
      )
    

路由配置：路径后不需要在加上传入的参数，但是name必须和父组件中的name一致

path: '/b', name: 'B', component: B

地址栏中的显示：地址栏不会带有传入的参数，而且再次刷新页面后参数会丢失

http://localhost:8080/#/b

子组件接收参数的方式：

<template>
  <div id="b">
    This is page B!
    <p>传入参数：this.$route.params.context</p>
  </div>
</template>

四、通过query来传递参数

父组件：

<button @click="clickQuery()">query传参</button>
    clickQuery() 
      this.$router.push(
        path: '/c',
        query: 
          context: '吴又可吴又可'
        
      )
    

路由配置：不需要做任何修改

path: '/c', name: 'C', component: C

地址栏中的显示(中文转码格式)：

http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6

子组件接受方法：

<template>
  <div id="C">
    This is page C!
    <p>这是父组件传入的数据: this.$route.query.context</p>
  </div>
</template>

工作中经常用的也就是上面的几种传参方式,完结~ 欢迎点赞收藏哦