vue 路由传参及解决动态路由传参刷新会消失问题

Posted 2021-09-05 奥特曼　

vue传参大致分为路由传参（？拼接传参）和动态路由传参

一、动态路由传参

定义路由

const routes = [
  {
    path: '/first',
    name:'first',
    component:()=>import( '../components/first.vue' )
    // component:first
  },
  {
      path: '/second',
      name:'second',
    component:()=>import( '../components/second.vue' )
  },
]

router-link to 以对象形式跳转

<template>
  <div id="app">
    <router-link :to="{name:'first',params:{name:'张三'}}">params</router-link>

    <router-link :to="{name:'second',query:{name:'李四'}}">query</router-link>
    <router-view></router-view>
  </div>
</template>

（1）params传参

 <h1>params对象传参{{$route.params.name}}</h1>

 

 

 

（2）query传参

发现query传参并没有会丢失  注意看地址栏 在一开始跳转的时候 发现就在url地址栏上以？拼接了参数路径，而params跳转时没有，所以说这也是params动态路由传参和query动态路由传参的区别，也是params对象传参为什么会消失的问题。

解决params动态传参刷新后参数丢失问题

因为params动态路由传参时，url地址并没有拼接，但是query会拼接在地址栏上，所以vue提供给我们另一种动态传参的方式，我们只需要在定义路由时在后面拼接/:name，就可以解决刷新后参数会丢失的问题，注意这里不是以？拼接了路径  

  {
    path: '/first/:name',
    name:'first',
    component:()=>import( '../components/first.vue' )
  },

 跳转

<router-link to="/first/张三">params</router-link>

当然 还有一种push写法 也是一样的道理 项目中也是用的比较多的

对象跳转

    <a @click="$router.push({name:'first',params:{name:'张三'}})">a链接</a>

$router.push 

  <a @click="$router.push('/first/张三')">a链接</a>

二、路由传参  ？拼接

只需要在路由的后面利用?的形式 进行参数的拼接

  <router-link to="/second?name=张三">？传参</router-link>

    <a @click="$router.push('/second?name=张三')">a链接</a>

三、后退

        <a @click="$router.back()">回退</a>
        <a @click="$router.go(-1)">回退</a>

go的功能还是比较强大的 正数可以前进  负数可以后退  里面的数字可以决定前进后退的层次