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中的#號

路由模式有兩種

hash：路徑帶 # 符號，如 http://localhost/#/login
history：路徑不帶 # 符號，如 http://localhost/login

修改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     }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Springmvc 重定向參數傳遞方式 VueRouter 參數傳遞與重定向 Vue路由重定向 laravel 重定向路由帶參數 vue-router動態路由使用，路由參數傳遞的方式 $router 和 $route Flutter路由跳轉及參數傳遞 vue3.0 路由重定向 6-vue-前端項目搭建流程、路由配置、頁面跳轉、參數傳遞、ElementUI vue-router路由嵌套與二級路由重定向 vue fetch 接口調用&參數傳遞