Vue 路由组件页面传递参数

比眉伴天荒 2023-06-06 03:51 45阅读 0赞

### 文章目录 ###

*   *  1 vue路由传参
     *   *  $route对象
         *  props传递
         *   *  布尔模式
             *  对象模式
             *  函数模式
         *  通过属性来传值
     *  2 编程式组件路由传值
     *   *  编程式路由传参

## 1 vue路由传参 ##

vue路由传参，是页面通信的重要组成部分，而掌握路由传参，用到Vue提供的一个重要对象 `$route` 。

切记`$route`不是`$router`

### $route对象 ###

{
            //路由组件传递参数
            path:'/about/chilrenRoute2/:id',
            component:chilrenRoute2
          }

页面传参

<router-link to="/about/chilrenRoute2/123"> chilrenRoute2 </router-link>

如果是根据页面便利的对象传入

<router-link to="'/about/chilrenRoute2/${xxxx}'"> chilrenRoute2 </router-link>
 
 <router-link to="`/about/chilrenRoute2/${xxxx}`"> chilrenRoute2 </router-link>

页面获取

通过 $route对象， 获取路由组件传递参数值 /about/chilrenRoute2/:id 路由的id值:  {
       { $route.params.id }}

如图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70]

### props传递 ###

#### 布尔模式 ####

如果 props 被设置为 true，route.params 将会被设置为组件属性

{
            //路由组件传递参数
            path:'/about/chilrenRoute2/:id',
            component:chilrenRoute2,
            props: true
          }

页面js

export default {
        props:['id']
      }

获取值

通过 props传递——布尔模式 ， 获取路由组件传递参数值 /about/chilrenRoute2/:id 路由的id值: {
 { this.id }}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 1]

#### 对象模式 ####

{
            //对象模式
            path:'/about/chilrenRoute2/:id',
            component:chilrenRoute2,
            props: { userName: 'userName'}
          }

export default {
        props:['userName']
      }

获取

通过 props传递——对象 ， 获取路由组件传递参数值 /about/chilrenRoute2/:id 路由的id值: {
 { this.userName }}

![在这里插入图片描述][20191009224737820.png]

#### 函数模式 ####

函数模式的路由配置中，props属性是函数，这个函数返回一个对象。  
在函数模式中，可以有一个参数，这个参数就是route对象，里面存储的是路由的相关携带信息。

{
            //函数模式
            path:'/about/chilrenRoute2/:id',
            component:chilrenRoute2,
            props: function (route){
    
              //route 是 $route对象
                return {
                  userName:'userName',
                  querys: route.params.id
                }
    
            }
          }

export default {
        // props:['id']
        // props:['userName']
        props:['userName','querys']
      }

获取

通过 props传递——函数模式 ， 获取路由组件传递参数值 /about/chilrenRoute2/:id 路由的id值: {
 { this.userName }} , {
 { this.querys }} , {
 { $route.params }}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 2]

### 通过属性来传值 ###

传值

<router-view msg="msg 属性传值"></router-view>

js 以及 获取  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 3]

结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 4]

## 2 编程式组件路由传值 ##

除了使用上面 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

编程式提供两种跳转方式

*  $router.push(location, onComplete?, onAbort?)
 *  $router.replace(location, onComplete?, onAbort?)

push 和 replace 最大区别在于push 会向 history 添加新纪录，也就是浏览器历史记录；而replace不会。

> 若使用了 replace 跳转页面可以使用 router.go(n) 来控制页面返回跳转，相当于 window.history.go(n) 方法。  
> 其中的n表示向前向后后退多少步。

// 在浏览器记录中前进一步，等同于 history.forward()
    router.go(1)
    
    // 后退一步记录，等同于 history.back()
    router.go(-1)

费话不多少 直接上代码

通过编程式路由 this.$router.push("routeCompoment1") 跳转页面
 
 通过编程式路由 this.$router.replace("routeCompoment2") 跳转页面

export default {
        methods:{
          tiao_zhaun1(){
            this.$router.push("routeCompoment1")
          },
          tiao_zhaun2(){
            this.$router.replace({path:"routeCompoment2"})
          } ,
        }
      }

在路由配置js中配置路由

routes:[
    //其他页面跳转配置略
        {
          path:"/routeCompoment1",
          name:'routeCompoment1',
          component:routeCompoment1
        },
        {
          path:"/routeCompoment2",
          name:'routeCompoment2',
          component:routeCompoment2
        }
        ]

如图

![在这里插入图片描述][20191013135917395.gif]

一开始我们请求页面 路径为http://localhost:8080 访问成功后是 http://localhost:8080/\#/about（这里我设置默认跳转路径）  
当我们点击 开始点击 home 页面路径变为 http://localhost:8080/\#/home  
同时routeCompoment1 跳转到  
![在这里插入图片描述][20191013135706422.png]

然后点击浏览器后退 直接返回上一步页面 http://localhost:8080/\#/home

重新请求http://localhost:8080/ 路径后 点击home后  
点击 routeCompoment2 的时候 直接回到 http://localhost:8080/\#/about

### 编程式路由传参 ###

下面两种传参都可以，代码应该可以看得懂！

js代码

methods:{
     
      //第一种
          tiao_zhaun3() {
            this.$router.push({
              path:'/test/routeCompoment3?id=233333111'
            });
          },
           //第二种
          tiao_zhaun4() {
            this.$router.push({
              path: '/routeCompoment4',
              query: {
                ids: '2333333333',
                name: 'Tizzy'
              }
    
            });
          }
    
    }

在路由配置js中配置路由

{
          path:"/test/routeCompoment3",
          name:'routeCompoment3',// 组件名 可写可不写
          component:routeCompoment3
        },
        {
          path:"/routeCompoment4",
          name:'routeCompoment4',
          component:routeCompoment4
        },

页面效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 5]

页面获取值

通过路由对象获取值 \{ \{$route.query.id\}\}

第一种

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 6]

第二种

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 7]

学习参考

https://router.vuejs.org/zh-cn/  
https://developer.mozilla.org/zh-CN/docs/Web/API/History  
https://www.jianshu.com/p/81ed5a90bb10

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70]: /images/20230601/ece601660f5247f18d1715bbb5c2988d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 1]: /images/20230601/9864bdc5c19149688c2d75e958790b01.png
[20191009224737820.png]: /images/20230601/df3d8b271a9249ccb88820a1a253236e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 2]: /images/20230601/cb436c12c4d94e469fa715270b0393c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 3]: /images/20230601/33efb9871c614891be8530ed0c6dadf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 4]: /images/20230601/480ca9d21bfe427ebe7294a2deb73640.png
[20191013135917395.gif]: /images/20230601/8ececa8722944fbf8164118418d90d71.png
[20191013135706422.png]: /images/20230601/fffddcd86c994d33b10007cf088b07be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 5]: /images/20230601/6f23a82d2d294c268678f18fb1d4115b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 6]: /images/20230601/1bc164f3ec5f47a1a1f9912420b1bfc4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 7]: /images/20230601/e0700abb12ea46d5a7ecd1a82d1bd513.png