您的位置: 首页  >  IT文章  >  14.Vue路由参数传递以及重定向 1.使用场景 2.使用流程 3.路由参数传递的两种方式 4.重定向  5.让Main页面获得Login页面传递来的用户名： 6.修改URL中的#号

14.Vue路由参数传递以及重定向 1.使用场景 2.使用流程 3.路由参数传递的两种方式 4.重定向  5.让Main页面获得Login页面传递来的用户名： 6.修改URL中的#号

分类: IT文章 • 2022-07-28 21:24:09

　　我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 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>

展示：

14.Vue路由参数传递以及重定向 1.使用场景 2.使用流程 3.路由参数传递的两种方式 4.重定向  5.让Main页面获得Login页面传递来的用户名： 6.修改URL中的#号

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>

展示：

14.Vue路由参数传递以及重定向 1.使用场景 2.使用流程 3.路由参数传递的两种方式 4.重定向  5.让Main页面获得Login页面传递来的用户名： 6.修改URL中的#号

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>

 5.让Main页面获得Login页面传递来的用户名：

修改Login.vue：修改 his.$router.push("/main/" + this.form.username); 

 1 methods: {
 2       onSubmit(formName) {
 3         // 为表单绑定验证功能
 4         this.$refs[formName].validate((valid) => {
 5           if (valid) {
 6             // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
 7             this.$router.push("/main/" + this.form.username);
 8           } else {
 9             this.dialogVisible = true;
10             return false;
11           }
12         });
13       }
14     }

修改路由文件index.js，配置Main.vue可以通过props传递参数

 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/:name',
24       name: 'Main',
25       component: Main,
26       props: true,
27       // 配置嵌套路由
28       children: [
29         {
30           path: '/user/profile/:userId/:userName',
31           name: 'UserProfile',
32           component: UserProfile
33         },
34         {
35           path: '/user/list/:user1/:user2',
36           name:'UserList',
37           component: UserList,
38           props: true
39         },
40         {
41           path: '/goHome/:name',
42           redirect: '/main/:name'
43         }
44       ]
45     }
46   ]
47 });

修改Main.vue

1 <script>
2   export default {
3     props: ['name'],
4     name: "Main"
5   }
6 </script>
 1       <el-container>
 2 
 3         <el-header style="text-align: right; font-size: 12px">
 4           <el-dropdown>
 5             <i class="el-icon-setting" style="margin-right: 15px"></i>
 6             <el-dropdown-menu slot="dropdown">
 7               <el-dropdown-item>个人信息</el-dropdown-item>
 8               <el-dropdown-item>退出登录</el-dropdown-item>
 9             </el-dropdown-menu>
10           </el-dropdown>
11           <span>{{name}}</span>
12         </el-header>
13 
14         <el-main>
15           <router-view />
16         </el-main>
17 
18       </el-container>

6.修改URL中的#号

路由模式有两种

修改index.js

1 export default new Router({
2   mode: 'history',
3   routes: [
4   ]
5 });

 7.设置404页面

  • 编写404页面组件
  • 配置路由

404页面组件

 1 <template>
 2     <div>
 3       <h1>404,你的页面走丢了！</h1>
 4     </div>
 5 </template>
 6 
 7 <script>
 8     export default {
 9         name: "NotFound"
10     }
11 </script>
12 
13 <style scoped>
14 
15 </style>

配置路由index.js

import NotFound from '../views/NotFound'
1     {
2       path: '*',
3       component: NotFound
4     }

相关推荐