14.Vue路由参数传递以及重定向

Posted zhihaospace

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了14.Vue路由参数传递以及重定向相关的知识,希望对你有一定的参考价值。

1.使用场景

  我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。此时我们就需要传递参数了;

2.使用流程

  • 修改父组件,绑定的子组件路由名称以及传递的参数
  • 修改路由配置文件子组件的路径中添加参数,以及修改名称
  • 修改子组件<template>内容用于展示

3.路由参数传递的两种方式

注:不要在<template>中直接添加获得参数,需要在外层加标签包含起来

1.占位符:

修改父组件Main.vue

  • name:路由中配置的子组件名称
  • params:需要传递给子组件的参数
 1 <template>
 2   <div>
 3     <el-container>
 4       <el-aside width="200px">
 5         <el-menu :default-openeds="[‘1‘]">
 6 
 7           <el-submenu index="1">
 8             <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
 9             <el-menu-item-group>
10 
11               <el-menu-item index="1-1">
12                 <router-link
13                   :to="{name:‘UserProfile‘,params:{userId:1,userName:‘wzh‘}}">
14                   个人信息
15                 </router-link>
16               </el-menu-item>
17 
18               <el-menu-item index="1-2">
19                 <router-link to="/user/list">用户列表</router-link>
20               </el-menu-item>
21 
22             </el-menu-item-group>
23           </el-submenu>
24 
25           <el-submenu index="2">
26             <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
27             <el-menu-item-group>
28               <el-menu-item index="2-1">分类管理</el-menu-item>
29               <el-menu-item index="2-2">内容列表</el-menu-item>
30             </el-menu-item-group>
31           </el-submenu>
32 
33         </el-menu>
34       </el-aside>
35 
36       <el-container>
37         <el-header style="text-align: right; font-size: 12px">
38           <el-dropdown>
39             <i class="el-icon-setting" style="margin-right: 15px"></i>
40             <el-dropdown-menu slot="dropdown">
41               <el-dropdown-item>个人信息</el-dropdown-item>
42               <el-dropdown-item>退出登录</el-dropdown-item>
43             </el-dropdown-menu>
44           </el-dropdown>
45         </el-header>
46 
47         <el-main>
48           <router-view />
49         </el-main>
50       </el-container>
51     </el-container>
52   </div>
53 </template>
54 
55 <script>
56   export default {
57     name: "Main"
58   }
59 </script>
60 
61 <style scoped lang="scss">
62   .el-header {
63     background-color: #B3C0D1;
64     color: #333;
65     line-height: 60px;
66   }
67 
68   .el-aside {
69     color: #333;
70   }
71 </style>

修改路由配置文件index.js

  • path:子组件的地址,参数就在最后追加 /:xxxx 
  • name:子组件名称
  • component:真实导入的子组件
 1 import Vue from ‘vue‘
 2 import Router from ‘vue-router‘
 3 
 4 import Login from "../views/Login"
 5 import Main from ‘../views/Main‘
 6 
 7 
 8 import UserProfile from "../views/user/Profile"
 9 import UserList from ‘../views/user/List‘
10 
11 Vue.use(Router);
12 
13 export default new Router({
14   routes: [
15     {
16       // 登录页
17       path: ‘/login‘,
18       name: ‘Login‘,
19       component: Login
20     },
21     {
22       // 首页
23       path: ‘/main‘,
24       name: ‘Main‘,
25       component: Main,
26       // 配置嵌套路由
27       children: [
28         {
29           path: ‘/user/profile/:userId/:userName‘,
30           name: ‘UserProfile‘,
31           component: UserProfile
32         },
33         {
34           path: ‘/user/list‘,
35           component: UserList
36         }
37       ]
38     }
39   ]
40 });

修改子组件Profile.vue显示

 {{$route.params.userId}} :用于获取路由对象中的参数

 1 <template>
 2   <div>
 3     <div>个人信息</div>
 4     编号:{{$route.params.userId}}
 5     <br>
 6     姓名:{{$route.params.userName}}
 7   </div>
 8 
 9 </template>
10 
11 <script>
12     export default {
13         name: "UserProfile"
14     }
15 </script>
16 
17 <style scoped>
18 
19 </style>

展示:

技术图片

2.使用props的方式

修改Main.vue

 1 <template>
 2   <div>
 3     <el-container>
 4       <el-aside width="200px">
 5         <el-menu :default-openeds="[‘1‘]">
 6 
 7           <el-submenu index="1">
 8             <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
 9             <el-menu-item-group>
10 
11               <el-menu-item index="1-1">
12                 <router-link
13                   :to="{name:‘UserProfile‘,params:{userId:1,userName:‘wzh‘}}">
14                   个人信息
15                 </router-link>
16               </el-menu-item>
17 
18               <el-menu-item index="1-2">
19                 <router-link :to="{name:‘UserList‘,params:{user1:‘小红‘,user2:‘小明‘}}">用户列表</router-link>
20               </el-menu-item>
21 
22             </el-menu-item-group>
23           </el-submenu>
24 
25           <el-submenu index="2">
26             <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
27             <el-menu-item-group>
28               <el-menu-item index="2-1">分类管理</el-menu-item>
29               <el-menu-item index="2-2">内容列表</el-menu-item>
30             </el-menu-item-group>
31           </el-submenu>
32 
33         </el-menu>
34       </el-aside>
35 
36       <el-container>
37         <el-header style="text-align: right; font-size: 12px">
38           <el-dropdown>
39             <i class="el-icon-setting" style="margin-right: 15px"></i>
40             <el-dropdown-menu slot="dropdown">
41               <el-dropdown-item>个人信息</el-dropdown-item>
42               <el-dropdown-item>退出登录</el-dropdown-item>
43             </el-dropdown-menu>
44           </el-dropdown>
45         </el-header>
46 
47         <el-main>
48           <router-view />
49         </el-main>
50       </el-container>
51     </el-container>
52   </div>
53 </template>
54 
55 <script>
56   export default {
57     name: "Main"
58   }
59 </script>
60 
61 <style scoped lang="scss">
62   .el-header {
63     background-color: #B3C0D1;
64     color: #333;
65     line-height: 60px;
66   }
67 
68   .el-aside {
69     color: #333;
70   }
71 </style>

修改index.js

 1 import Vue from ‘vue‘
 2 import Router from ‘vue-router‘
 3 
 4 import Login from "../views/Login"
 5 import Main from ‘../views/Main‘
 6 
 7 
 8 import UserProfile from "../views/user/Profile"
 9 import UserList from ‘../views/user/List‘
10 
11 Vue.use(Router);
12 
13 export default new Router({
14   routes: [
15     {
16       // 登录页
17       path: ‘/login‘,
18       name: ‘Login‘,
19       component: Login
20     },
21     {
22       // 首页
23       path: ‘/main‘,
24       name: ‘Main‘,
25       component: Main,
26       // 配置嵌套路由
27       children: [
28         {
29           path: ‘/user/profile/:userId/:userName‘,
30           name: ‘UserProfile‘,
31           component: UserProfile
32         },
33         {
34           path: ‘/user/list/:user1/:user2‘,
35           name:‘UserList‘,
36           component: UserList,
37           props: true
38         }
39       ]
40     }
41   ]
42 });

修改子组件List.vue

 1 <template>
 2   <div>
 3     <div>用户列表</div>
 4     用户1:{{user1}}<br>
 5     用户2:{{user2}}
 6   </div>
 7 
 8 </template>
 9 
10 <script>
11   export default {
12     props:
13       [‘user1‘,‘user2‘],
14     name:
15       "UserList"
16   }
17 </script>
18 
19 <style scoped>
20 
21 </style>

展示:

技术图片

4.重定向

  • 修改路由配置
  • 修改组件

修改路由index.js

 1 import Vue from ‘vue‘
 2 import Router from ‘vue-router‘
 3 
 4 import Login from "../views/Login"
 5 import Main from ‘../views/Main‘
 6 
 7 
 8 import UserProfile from "../views/user/Profile"
 9 import UserList from ‘../views/user/List‘
10 
11 Vue.use(Router);
12 
13 export default new Router({
14   routes: [
15     {
16       // 登录页
17       path: ‘/login‘,
18       name: ‘Login‘,
19       component: Login
20     },
21     {
22       // 首页
23       path: ‘/main‘,
24       name: ‘Main‘,
25       component: Main,
26       // 配置嵌套路由
27       children: [
28         {
29           path: ‘/user/profile/:userId/:userName‘,
30           name: ‘UserProfile‘,
31           component: UserProfile
32         },
33         {
34           path: ‘/user/list/:user1/:user2‘,
35           name:‘UserList‘,
36           component: UserList,
37           props: true
38         },
39         {
40           path: ‘/goHome‘,
41           redirect: ‘/main‘
42         }
43       ]
44     }
45   ]
46 });

修改组件Main.vue

 1 <template>
 2   <div>
 3     <el-container>
 4       <el-aside width="200px">
 5         <el-menu :default-openeds="[‘1‘]">
 6 
 7           <el-submenu index="1">
 8             <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
 9             <el-menu-item-group>
10 
11               <el-menu-item index="1-1">
12                 <router-link
13                   :to="{name:‘UserProfile‘,params:{userId:1,userName:‘wzh‘}}">
14                   个人信息
15                 </router-link>
16               </el-menu-item>
17 
18               <el-menu-item index="1-2">
19                 <router-link :to="{name:‘UserList‘,params:{user1:‘小红‘,user2:‘小明‘}}">用户列表</router-link>
20               </el-menu-item>
21 
22               <el-menu-item index="1-3">
23                 <router-link to="/goHome">回到首页</router-link>
24               </el-menu-item>
25 
26             </el-menu-item-group>
27           </el-submenu>
28 
29           <el-submenu index="2">
30             <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
31             <el-menu-item-group>
32               <el-menu-item index="2-1">分类管理</el-menu-item>
33               <el-menu-item index="2-2">内容列表</el-menu-item>
34             </el-menu-item-group>
35           </el-submenu>
36 
37         </el-menu>
38       </el-aside>
39 
40       <el-container>
41         <el-header style="text-align: right; font-size: 12px">
42           <el-dropdown>
43             <i class="el-icon-setting" style="margin-right: 15px"></i>
44             <el-dropdown-menu slot="dropdown">
45               <el-dropdown-item>个人信息</el-dropdown-item>
46               <el-dropdown-item>退出登录</el-dropdown-item>
47             </el-dropdown-menu>
48           </el-dropdown>
49         </el-header>
50 
51         <el-main>
52           <router-view />
53         </el-main>
54       </el-container>
55     </el-container>
56   </div>
57 </template>
58 
59 <script>
60   export default {
61     name: "Main"
62   }
63 </script>
64 
65 <style scoped lang="scss">
66   .el-header {
67     background-color: #B3C0D1;
68     color: #333;
69     line-height: 60px;
70   }
71 
72   .el-aside {
73     color: #333;
74   }
75 </style>

 

以上是关于14.Vue路由参数传递以及重定向的主要内容,如果未能解决你的问题,请参考以下文章

如何在Vue中提交表单,重定向到新路由并传递参数?

VueRouter 参数传递与重定向

vue 笔记(十六) 参数传递及重定向

vue 笔记(十六) 参数传递及重定向

如何在Angular2 rc3路由中处理来自oauth重定向url的哈希片段

三PHP框架Laravel学习笔记——路由参数重定向视图