参数传递 重定向

设置v-bind:to 属性，传入参数id

<!--  name：传组件名  params: 传递参数 需要对象  要用v-bind:   -->
 <router-link :to="{name: 'UserProfile',params: {id: 1}}">个人信息</router-link>

在路由中绑定参数：
index.js:

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

在Profile.vue取出参数：

template>
  <div>
<!--    所有元素  不能直接在根节点下 （即 要用标签包裹起来）-->
    <h1>个人信息</h1>
    {{$route.params.id}}
  </div>

</template>

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

<style scoped>

</style>

---

方法二：
先在index.js中的路由中设置 props: true

routes: [
    {
      path: '/main',
      component: Main,
      //嵌套路由
      children: [
        {path: '/user/profile/:id',name: 'UserProfile',component: UserProfile,props: true},
        {path: '/user/list',component: UserList},
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]

然后在Profile.vue中通过组件接收参数：props: [‘id’],然后取出
{{id}}

<template>
  <div>
<!--    所有元素  不能直接在根节点下 （即 要用标签包裹起来）-->
    <h1>个人信息</h1>
    {{id}}
  </div>

</template>

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

<style scoped>

</style>

设置重定向：

设置一个新的路由 属性如下：
即 走到/goHome页面时 重定向到/main页面

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

在Main.vue中放置路由：

<el-menu-item index="1-3">
   <router-link to="/goHome">回到首页</router-link>
</el-menu-item>