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

1.使用场景

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

2.使用流程

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

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

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

1.占位符:

修改父组件Main.vue

  • name:路由中配置的子组件名称
  • params:需要传递给子组件的参数

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

修改路由配置文件index.js

  • path:子组件的地址,参数就在最后追加 /:xxxx
  • name:子组件名称
  • component:真实导入的子组件

    1 import Vue from 'vue'
    2 import Router from 'vue-router'
    3 
    4 import Login from &quot;../views/Login&quot;
    5 import Main from '../views/Main'
    6 
    7 
    8 import UserProfile from &quot;../views/user/Profile&quot;
    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 &lt;template&gt;
 2   &lt;div&gt;
 3     &lt;div&gt;个人信息&lt;/div&gt;
 4     编号:{{$route.params.userId}}
 5     &lt;br&gt;
 6     姓名:{{$route.params.userName}}
 7   &lt;/div&gt;
 8 
 9 &lt;/template&gt;
10 
11 &lt;script&gt;
12     export default {
13         name: &quot;UserProfile&quot;
14     }
15 &lt;/script&gt;
16 
17 &lt;style scoped&gt;
18 
19 &lt;/style&gt;

展示:

![]()

2.使用props的方式

修改Main.vue

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

修改index.js

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 
 4 import Login from &quot;../views/Login&quot;
 5 import Main from '../views/Main'
 6 
 7 
 8 import UserProfile from &quot;../views/user/Profile&quot;
 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 &lt;template&gt;
 2   &lt;div&gt;
 3     &lt;div&gt;用户列表&lt;/div&gt;
 4     用户1:{{user1}}&lt;br&gt;
 5     用户2:{{user2}}
 6   &lt;/div&gt;
 7 
 8 &lt;/template&gt;
 9 
10 &lt;script&gt;
11   export default {
12     props:
13       ['user1','user2'],
14     name:
15       &quot;UserList&quot;
16   }
17 &lt;/script&gt;
18 
19 &lt;style scoped&gt;
20 
21 &lt;/style&gt;

展示:

![]()

4.重定向

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

修改路由index.js

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

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

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

 1 methods: {
 2       onSubmit(formName) {
 3         // 为表单绑定验证功能
 4         this.$refs[formName].validate((valid) =&gt; {
 5           if (valid) {
 6             // 使用 vue-router 路由到指定页面,该方式称之为编程式导航
 7             this.$router.push(&quot;/main/&quot; + 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 &quot;../views/Login&quot;
 5 import Main from '../views/Main'
 6 
 7 
 8 import UserProfile from &quot;../views/user/Profile&quot;
 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       // 首页
&lt;strong&gt;23       path: '/main/:name',
&lt;/strong&gt;24       name: 'Main',
25       component: Main,
&lt;strong&gt;26       props: true,
&lt;/strong&gt;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 &lt;script&gt;
2   export default {
3     props: ['name'],
4     name: &quot;Main&quot;
5   }
6 &lt;/script&gt;
 1       &lt;el-container&gt;
 2 
 3         &lt;el-header style=&quot;text-align: right; font-size: 12px&quot;&gt;
 4           &lt;el-dropdown&gt;
 5             &lt;i class=&quot;el-icon-setting&quot; style=&quot;margin-right: 15px&quot;&gt;&lt;/i&gt;
 6             &lt;el-dropdown-menu slot=&quot;dropdown&quot;&gt;
 7               &lt;el-dropdown-item&gt;个人信息&lt;/el-dropdown-item&gt;
 8               &lt;el-dropdown-item&gt;退出登录&lt;/el-dropdown-item&gt;
 9             &lt;/el-dropdown-menu&gt;
10           &lt;/el-dropdown&gt;
11           &lt;span&gt;{{name}}&lt;/span&gt;
12         &lt;/el-header&gt;
13 
14         &lt;el-main&gt;
15           &lt;router-view /&gt;
16         &lt;/el-main&gt;
17 
18       &lt;/el-container&gt;

6.修改URL中的#号

路由模式有两种

修改index.js

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

7.设置404页面

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

404页面组件

 1 &lt;template&gt;
 2     &lt;div&gt;
 3       &lt;h1&gt;404,你的页面走丢了!&lt;/h1&gt;
 4     &lt;/div&gt;
 5 &lt;/template&gt;
 6 
 7 &lt;script&gt;
 8     export default {
 9         name: &quot;NotFound&quot;
10     }
11 &lt;/script&gt;
12 
13 &lt;style scoped&gt;
14 
15 &lt;/style&gt;

配置路由index.js

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

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。