为了账号安全,请及时绑定邮箱和手机立即绑定

Vue 路由器未路由到指定位置

Vue 路由器未路由到指定位置

波斯汪 2022-09-23 10:02:45

我正在将 vue 与 vue 路由器一起使用,路由在路由到子路由时不起作用。


  {

    path: '/user',

    name: 'User',

    component: User,

    children: [

      {

        path: 'profile',

        component: Profile,

      },

    ],

  }

以编程方式路由到 /用户/配置文件


<template>

    <div>

            <button @click="goToUserProfile()">create new</button>

    </div>

</template>


<script>


export default {

  methods: {

    goToUserProfile() {

      this.$router.push('/user/profile')    // Routing doesn't work

       .catch(console.log);

    },

  },

};

</script>


查看完整描述

2 回答

?
四季花海

TA贡献1467条经验 获得超5个赞

为“/用户/配置文件”提供路由名称“配置文件”


  {

    path: '/user',

    name: 'User',

    component: User,

    children: [

      {

        path: 'profile',

        name: "Profile",

        component: Profile,

      },

    ],

  }

导航 使用路由名称


this.$router.push({name: "Profile"});

您的用户组件应像这样声明


用户.vue


<template>

<div>

    <p>this is user component</p>

    <!-- your Profile component will replace this route-view -->

    <route-view /> 

</div>

</template>


演示

https://codesandbox.io/s/falling-bash-6dl7m


查看完整回答
反对 回复 2022-09-23
?
肥皂起泡泡

TA贡献1490条经验 获得超5个赞

请确保输入“用户组件”模板以显示嵌套(子)路由。<router-view></router-view>


<template>

    <div>

        <button @click="goToUserProfile()">create new</button>

        <router-view></router-view>   <!-- placeholder for children routes -->

    </div> 

</template> 

然后,您可以通过两者访问和this.$router.push('/user/profile')this.$router.push({ name: 'UserProfile' })


正如 Vue 路由器文档所述:要将组件渲染到此嵌套插座中,我们需要使用 VueRouter 中的子选项。


https://router.vuejs.org/guide/essentials/nested-routes.html


希望这有帮助。


查看完整回答
反对 回复 2022-09-23
  • 2 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信