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>
原文地址：https://www.cnblogs.com/zhihaospace/p/12083722.html
时间： 2024-08-26 05:35:45