springboot重定向 vue页面带参数 springboot重定向vue传参数

六、参数传递

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各

不相同的用户，都要使用这个组件来渲染。此时我们就需要传递参数了；

1、使用路径匹配的方式

1）修改路由配置index.js

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

说明：主要是在path属性中增加了:id这样的占位符

2）传递参数的两种方式

（1）router-link

<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>

说明：此时我们将 to 改为了:to，是为了将这一属性当成对象使用，注意router-link中的 name 属性名称
一定要和 路由中的 name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径；

（2）代码方式

this.$router.push({ name: 'UserProfile', params: {id: 1}});

3）接收参数 Prifile.vue

在目标组件中使用

<template>
  <div>
    <h1>个人信息</h1>
<!--    在目标组件中接受参数
  必须放在根标签下
-->
    {{$route.params.id}}
  </div>

</template>

2、使用 props 的方式

1）修改路由配置 index.js

{
  path:'/user/profile/:id',
  name:'UserProfile',
  component:UserProfile,
  props:true
},

说明：主要增加了 props: true 属性

2）传递参数

同上

3）接收参数 Prifile.vue

为目标组件增加 props 属性，代码如下：

export default {
    props: ['id'],
    name: "UserProfile"
  }

模板中使用

{{ id }}

接受参数

七、重定向

重定向的意思大家都明白，但 Vue 中的重定向是作用在路径不同但组件相同的情况下

1、配置重定向

1）修改路由配置

说明：这里定义了两个路径，一个是 /main ，一个是 /goHome ，其中 /goHome 重定向到了 /main 路径，由此

可以看出重定向不需要定义组件；

2）重定向到组件

Main.vue

<el-menu-item index="1-3">
  <router-link to="/goHome">回到首页</router-link>
</el-menu-item>

2、带参数的重定向

1）修改路由配置

{
      // 首页
      path: '/main/:username',
      name: 'Main',
      component: Main
    },
    {
      path: '/goHome/:username',
      redirect: '/main/:username'
    }

2）重定向到组件

Main.vue

<el-menu-item index="1-4">
  <router-link to="/goHome/xm">回到小明</router-link>
</el-menu-item>

3、带参数的重定向的应用：

打开登录页面，输入的用户名会在主页面显示

1）Login.vue

onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main/"+this.form.username);
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      },

2）index.js

routes:[
    {
      path:'/main/:username',
      props:true,
      name:'main',
      component:Main,//嵌套路由
      children:[
。。。。]
}

3）Main.vue

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

接受参数

<span>{{username}}</span>

登录后显示

八、路由模式与404

1、路由模式

路由模式有两种：

• hash：路径带 #，如：http://localhost:8083/#/main/lisa
• history：路径不带#，http://localhost:8083//main/lisa

修改路由配置：

export default new Router({
  mode:'history',
  routes:[
      ]

2、404页面

在views下新建一个NotFound.vue

<template>
    <div>
      <h1>你的页面走丢了！！</h1>
    </div>
</template>

<script>
    export default {
        name: "NotFound"
    }
</script>

<style scoped>

</style>

在路由中引用

import NotFound from '../views/NotFound'

  {
      path:'*',
      name:'NotFound',
      component:NotFound
    }

测试访问：