[VUE] pass parameters and redirect

Pass parameters and redirect

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 obtain and display parameters

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

You can also pass parameters by props

index.js的router

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

Profile.vue directly to {{id}}

{{id}}

Redirection method

router routing

{
  path: '/back',
  redirect: '/main'
},
<router-link to="/back">返回首页</router-link>

Login User

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>

Guess you like

Origin www.cnblogs.com/pinked/p/12329626.html