vue 笔记（十六） 参数传递及重定向

Posted 2021-07-20 孤注一掷 、

接着上一个工程写带有参数请求的路由跳转

一、

1.主页面 Main.vue 传递参数 

<el-menu-item index="1-1">
<!--插入的地方-->
<router-link :to="{name:'UserProfile',params:{ id:1,name:'swk'}}">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<!--插入的地方-->
<router-link to="/user/list">用户列表</router-link>
</el-menu-item>

name：传递的组件名

params：传递参数

改成了：to  ，即将这一属性绑定成对象

2.路由配置 index.js 里

children:[
        {
          path:'/user/profile/:id/:name',
          name:'UserProfile',
          component:Profile
        },
        {
          path: '/user/list',
          component: List
        }
      ]

添加name 与上面组件名一致

/：id    添加参数占位符

3.在组件页 Profile.vue 中

  <template>
    <div>
      <h1>个人信息</h1>
      <h1>{{$route.params.id}}</h1>
      <h1>{{$route.params.name}}</h1>
    </div>
  
  </template>
  
  <script>
      export default {
          name: "UserProfile"
      }
  </script>
  
  <style scoped>
  
  </style>

注意：template中 只能有一个元素结点

使用 $route.params.id  来获得参数id的值

4.结果：

二、解耦方式

1.路由配置 index.js 中 添加支持传递参数

children:[
        {
          path:'/user/profile/:id/:name',
          name:'UserProfile',
          // 支持传递参数
          props:true,   
          component:Profile
        },
        {
          path: '/user/list',
          component: List
        }
      ]

2.同样在Main.vue 中 

<el-menu-item index="1-1">
<!--插入的地方-->
<router-link :to="{name:'UserProfile',params:{ id:1,name:'swk'}}">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<!--插入的地方-->
<router-link to="/user/list">用户列表</router-link>
</el-menu-item>

3. 在 组件页 Profile.vue 中

  <template>
    <div>
      <h1>个人信息</h1>
      <h1>{{$route.params.id}}</h1>
      <h1>{{$route.params.name}}</h1>
      <h2>{{id}}</h2>
      <h2>{{name}}</h2>
    </div>

  </template>

  <script>
      export default {
        props:['id','name'],
          name: "UserProfile"
      }
  </script>

  <style scoped>

  </style>

4.运行结果：

 

三、重定向

下面写一个重定向到首页的goHome路由路径

1. 在路由配置 index.js 中 添加一条

{
      path: '/goHome',
      redirect:'/main'
    }

2. 主页面 Main.vue 中 添加 

<el-menu-item index="1-3">
                <!--插入的地方-->
                <router-link to="/goHome">回到首页</router-link>
              </el-menu-item>

3.运行结果

点击回到首页，显示

重定向成功！