欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

参数传递 重定向

程序员文章站 2022-03-24 20:00:22
...

设置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>