1.使用场景
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。此时我们就需要传递参数了;
2.使用流程
- 修改父组件,绑定的子组件路由名称以及传递的参数
- 修改路由配置文件子组件的路径中添加参数,以及修改名称
- 修改子组件内容用于展示
3.路由参数传递的两种方式
注:不要在中直接添加获得参数,需要在外层加标签包含起来
1.占位符:
修改父组件Main.vue
- name:路由中配置的子组件名称
- params:需要传递给子组件的参数
1 2353 54 55 60 614 525 35 36default-openeds="['1']"> 6 7 348 用户管理 9 24 2510 11 2312 17 1814 个人信息 15 1619 21 22用户列表 2026 内容管理 27 32 3328 31分类管理 29内容列表 3037 5138 46 4739 40 4541 44个人信息 42退出登录 4348 5049
修改路由配置文件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 238 9 10 11 16 17个人信息4 编号:{{$route.params.userId}} 5
6 姓名:{{$route.params.userName}} 7
展示:
2.使用props的方式
修改Main.vue
1 2353 54 55 60 614 525 35 36default-openeds="['1']"> 6 7 348 用户管理 9 24 2510 11 2312 17 18link 13 :to="{name:'UserProfile',params:{userId:1,userName:'wzh'}}"> 14 个人信息 15 16 19 21 22用户列表 2026 内容管理 27 32 3328 31分类管理 29内容列表 3037 5138 46 4739 40 4541 44个人信息 42退出登录 4348 5049
修改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 237 8 9 10 18 19用户列表4 用户1:{{user1}}
5 用户2:{{user2}} 6
展示:
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 2357 58 59 64 654 565 39 40default-openeds="['1']"> 6 7 388 用户管理 9 28 2910 11 2712 17 18link 13 :to="{name:'UserProfile',params:{userId:1,userName:'wzh'}}"> 14 个人信息 15 16 19 21 22用户列表 2023 25 26回到首页 2430 内容管理 31 36 3732 35分类管理 33内容列表 3441 5542 50 5143 44 4945 48个人信息 46退出登录 4752 5453
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
12 3 4 13 145 6 11 {{name}} 127 10个人信息 8退出登录 915 17 1816
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 235 6 7 12 13404,你的页面走丢了!
4
配置路由index.js
import NotFound from '../views/NotFound'
1 { 2 path: '*', 3 component: NotFound 4 }