• 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>

     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     }
  • 相关阅读:
    hdu 5101 Select
    hdu 5100 Chessboard
    cf B. I.O.U.
    cf C. Inna and Dima
    cf B. Inna and Nine
    cf C. Counting Kangaroos is Fun
    Radar Installation 贪心
    spfa模板
    Sequence
    棋盘问题
  • 原文地址：https://www.cnblogs.com/zhihaospace/p/12083722.html
Copyright © 2020-2023  润新知