[vue]傳遞參數與重定向

傳遞參數與重定向

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>