【Vue笔记五】 参数传递、重定向

一：参数传递

方式1：

1. 已知vue在点击调用组件的时候回用得到router-link,router-link中的to属性能够绑定对应的路由地址，同时也可以使用params参数进行传值。

格式：

to="{name: ‘【路由名称】’,params: {【键】：【值】}}"

  //带参数的路由跳转
 <router-link :to="{name: 'UserPerson',params:{id: 1}}">显示信息</router-link>

2. 配置后进入index.js进行路由配置，设置接收参数，只需要在对应的路由地址后面加上: 【键名】即可。

 {
      path: '/',
      component: Main,
      children:[
        {path: '/user/Person/:id',name:"UserPerson",component:UserPerson},
        {path: '/user/List',component:UserList}
      ]
    }

3. 然后在对应的模板中接收

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

<script>
    export default {
        name: "UserPerson"
    }
</script>

<style scoped>

</style>

1. 访问
   
   
   

方式二：

1. 直接在index.js中加props参数

  {path: '/user/Person/:id',name: "UserPerson",component:UserPerson,props: true}

2. 接下来直接去对应的组件中用props参数接收

<template>
  <div>
  <h1>个人信息</h1>
  {{id}}
  </div>
</template>

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

二：重定向

1. 路由定义

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