【VUE路由query和params的写法区别】

路由配置：

 1 const routers = [
 2   {
 3     path: "/",
 4     component: Layout,
 5     name: "Layout",
 6     redirect: "/login",
 7     children: [
 8       {
 9         path: 'userCenter',
10         name: 'user',
11         component: () => import(/* webpackChunkName: "index" */ '../views/user/index.vue'),
12         meta: {
13           title: '个人中心',
14           icon: '',
15           requireAuth: true
16         }
17       }
18     ]
19   }
20 ];

 

  • 使用query传参id 并跳转
1         vm.$router.push({
2           path: '/userCenter',
3           query: {
4             id: 'abcdefg'
5           }
6         })
http://localhost:8080/#/userCenter?id=abcdefg
  • 使用params传参并跳转

params是路由的一部分，参数是必须的，否则会无法打开页面或者空白

 1      {
 2         path: 'userCenter/:id',
 3         name: 'user',
 4         component: () => import(/* webpackChunkName: "index" */ '../views/user/index.vue'),
 5         meta: {
 6           title: '个人中心',
 7           icon: '',
 8           requireAuth: true
 9         }
10       }

跳转中，使用name和params

1         vm.$router.push({
2           name: 'user',
3           params: {
4             id: 'abcdefg'
5           }
6         })
http://localhost:8080/#/userCenter/abcdefg

总结：

  • query 通过 route中 的 path 引入路由，query是拼在后边的参数，有没有不影响
  • params通过  route中的 name 引入路由，必须有
posted @ 2020-10-22 16:23  行屰  阅读(163)  评论(0)  编辑  收藏  举报