vue route 路由拼接参数的两种方式

1、 拼接路由上，获取路由上的参数内容（SpringBoot @PathVariable形式）

vue 中代码样例为：

{
   component: 'BasicLayout',
   path: '/',
   key: '',
   redirect: '/view/:username/:password',
   title: '路由测试',
   children: []
}

主要内容为：redirect: '/view/:username/:password，

主要的书写方式：  : + 属性名的方式

例子：如在路由的地址上使用用户名和密码。

如路由地址为 : http: //localhost:3000/view/zhangsan/123456

用户名： zhangsan

密码： 123456

 实际页面使用时通过 this.$route.params 中使用

控制台输出内容如下图

2、拼接在路由的后台边，? 和& 的方式添加参数。

vue中使用正常路由即可

主要的书写方式：在路径后的边拼写 ?username=  & password=

例子：如在路由的地址上使用用户名和密码。

如路由地址为 :  http: //localhost:3000/view?username=lisi&password=654321

用户名： lisi

密码： 654321

实际页面使用时通过 this.$route.query 中使用

控制台输出内容如下图