vue50 —— vue-router 参数传递

路由跳转参数传递：params， query

向组件传递数据

params类型

• 配置路由格式： /router/:id
• 传递方式：在path后面跟上对应的值
• 传递后形成的路径：/router/abc， /router/123

query类型 （数据多时使用合适）

• 配置路由格式：/router，即普通配置
• 传递的方式：对象中使用 query 的 key
• 传递后形成的路径： /router?id=abc, /router?id=123

1. 新建一个 Profile.vue 文件
2. router - index.js:

const Profile = () => import('../components/Profile')

{
    path: '/profile',
    component: Profile
  }

3. App.vue:

<router-link :to="{path: '/profile', query:{name:'zzfx',age:17}}">档案</router-link>

代码写法：

App.vue：

...
 <!-- <router-link :to="/user/+userId" replace>用户</router-link> -->
    <button @click="userClick">用户</button>

 <!-- <router-link :to="{path: '/profile', query:{name:'zzfx',age:17}}">档案</router-link> -->
    <button @click="profileClick">档案</button>
   ...

	userClick(){
      this.$router.push('/user/' + this.userId)
    },
    profileClick(){
      this.$router.push({
        path: '/profile',
        query:{
          name: 'zfxx',
          age: 17
        }
      })
    }

url: 协议：//主机：端口/路径？query#碎片

scheme：//host：port/path？query#fragment