vue页面传参

路由

1.动态路由

路由配置

{
  path: '/user/:userId',
  name: 'user',
  component: User
}

路由跳转方式

1. this.$router.push('/user/123')
2. this.$router.push({path: '/user/123'})
3. this.$router.push({ name: 'user', params: { userId: 123 }})

跳转后的页面，获取参数this.$route.params.userId

路由配置1、2，必须配置 :userId；

路由配置3，也可以不配置 :userId，也是可以跳转的，跳转后的路由是/user,获取参数方法也一样

区别是，跳转后的页面，第一次可请求,刷新页面userId会消失。

2.query

query传递的参数会显示在url后面?userId=？

路由配置

{
  path: '/user',
  name: 'user',
  component: User
}

路由跳转方式this.$router.push({ path: '/user', query: { userId: 123 }}) path，name均可。

跳转后的页面，获取参数this.$route.query.userId

3.路由解偶

路由配置

{
    path: "/user/:userId",
    name: "user",
    component: () => import("@/views/user/id"),
    props: true
}

跳转后的页面，获取参数

props:['userId'],

this.userId// 路由中的userId

路由配置props

1. 布尔

2. 对象->传入的为静态数据

{
    path: "/user",
    name: "user",
    component: () => import("@/views/user/id"),
    props: {userId:888}
}

props:['userId'],

this.userId  //888

3. 方法

props: (route) => ({ query: route.query })

文档

sessionStorage、localStorage

略

页面刷新，丢失数据问题

既不想数据放到地址栏，又不想刷新丢失数据。

1. 路由+sessionStorage

`this.$router.push({ name: 'pathb', params: { userId: 123 }})`

{
    path: "/pathb",
    name: "pathb",
    component: () => import("@/views/path/b"),
    props: route => {
      return routerPropsFun(route, "pathb");
    }
}

function routerPropsFun(route, sessionStorageName) {
  if (Object.keys(route.params).length) {
    sessionStorage.setItem(sessionStorageName, JSON.stringify(route.params));
    return {
      PARAMS: route.params
    };
  } else {
    return {
      PARAMS: JSON.parse(sessionStorage.getItem(sessionStorageName))
    };
  }
}

2. vuex+sessionStorage+路由拦截

全局数据（用户信息），浏览器刷新时，vuex的数据会丢失。

数据存储更新时，vuex、sessionStorage都存和更新。当刷新时，通过

router.beforeEach((to, from, next) => {})路由拦截将sessionStorage值赋给vuex

3. vuex-persistedstate 插件

vuex-persistedstate 地址