[vue]传递参数与重定向

Posted 2021-03-09 pinked

传递参数与重定向

Main.vue

<!--name:对应index.js中router的name, params:传参-->
<router-link :to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>

index.js的router

{
  path: '/user/Profile/:id',
  name: 'UserProfile',
  component: UserProfile
},

Profile.vue获取并展示参数

{{$route.params.id}}//template中所有的元素必须包含在标签中

也可以通过props来传递参数

index.js的router

path: '/user/Profile/:id',
name: 'UserProfile',
component: UserProfile,
props: true  //允许props传参

Profile.vue直接用{{id}}即可

{{id}}

重定向的方法

router路由

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

<router-link to="/back">返回首页</router-link>

登录用户

Login.vue

this.$router.push("/main/"+this.form.username);

router

path: '/main/:name',
props: true,
component: Main,

main.vue

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