springboot如何重定向到一个指定的vue页面 springboot重定向vue传参数

目录

• 1.参数传递
• 2.怎么传递参数
• 3.测试
• 在这里插入图片描述
• 4.怎么实现重定向

1.参数传递

    参数传递在路由中的重要性不言而喻，我们就是需要通过传递的参数达到相同页面框架，不同用户展示不同数据的效果，如果没有参数的传递，那么页面对于各个用户来说就是相同的，这显然不是我们想要的

2.怎么传递参数

    vue中参数的传递还是遵循了原来的参数传递方式，即通过url传递参数，所以我们需要对组件绑定的url进行改进，使它可以接收参数，并将参数显示出来

• 首先就需要修改主路由配置文件index.js中对应组件的ulr

{
      path: "/user/profile/:id/:name",
      name: 'UserProfile',
      component: UserProfile,
      props: true//将我们在url中接收到的参数作为这个组件的参数来使用
    },

• 其次当然就是修改这个组件的设置，让它接收url中的参数作为自己的属性来使用

<template>
 <div>
   <h2>用户信息页</h2>
   {{id}}---{{name}}
 </div>
</template>

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

<style scoped>

</style>

• 修改使用路由的地方，使它能够携带要传递的参数

<router-link :to="{name:'UserProfile',params: {id: 123,name: '张三'}}" >我的信息</router-link>

---

3.测试

    通过上面的测试我们可以将前面博客做的登陆页面和我们的主页面联动起来：将用户登陆输入的用户名显示在主页面上，这显然需要传递参数实现

---

4.怎么实现重定向

    比如就接着上面那个测试页面，我想回到Main页面的视图，并且url显示的也是Main组件对应的url，此时就需要使用重定向来实现对应的需求了

• 在路由配置文件index.js中添加一条重定向的路由配置

{
  path: "/goHome",
  redirect:"/Main"
}

• 在视图组件中使用这个重定向路由