传参方式

借鉴自：https://blog.csdn.net/crazywoniu/article/details/80942642
方式一：params
第一种：

app.vue
链接2    
index.js
{
      path: '/one/:name',
      name: 'one',
      component: one
    }
one.vue
{{ msg }}我是{{$route.params.name}}
第二种： 这种传参方式是命名路由传递参数
app.vue
链接2  
 //注意：1、to前面加冒号，路径改为name:'one' ，如果改成path:'/one'的话，在one.vue页面获取不到父组件传递的参数，打印console.log(this.$route.params.name) //undefined。name属性值就是path的one。
2、这种传参方式是命名路由传递参数，命名路由传递参数需要使用params来传递，这里一定要注意使用params不是query。目标页面接收传递参数时使用params。如果在目标页面刷新是会出错的（页面上显示的数据会消失）
index.js
{
      path: '/one',    //注意这里
      name: 'one',
      component: one
    }
one.vue
{{ msg }}我是{{$route.params.name}}

方式二：query 查询参数传参方式

app.vue:
链接1
index.js:
{
      path: '/test',    //query与params不同的地方之一：test后面不加参数
      name: 'test',
      component: test,
      children: [
       
        {
          path: '/test/child',
          name: 'child',
          component: child
        },
        {
          path: '/test/childtwo',
          name: 'childtwo',
          component: childtwo
        }
      ]
    }
test.vue:
{{user.firstName}}今年{{$route.query.age}}
        //{{}}、{{}}两个可以放在一起。$route.query.age可以不加this

params传参和query传参的其它区别：
query传参还是用path定义路径，地址栏显示参数不太安全，类似ajax的get请求

params传参和query传参的其它区别：
1、query传参还是用path定义路径，地址栏显示参数不太安全，类似ajax的get请求。
2、params传参会在地址栏隐藏参数，与ajax的post请求极为相似，用法上不能用path来定义路径，要通过name来定义，
3、patams传参 ，路径不能使用path 只能使用name,不然获取不到传的数据

方式三：

app.vue:
click here to news page
methods:{
    routerTo(){
      this.$router.push({ name: 'news', params: { userId: 123 }});
    }
  }
one.vue: