vue-router 在 url 中返回 'function%20%' 而不是 param

Question

所以我要展示一些像这样的面包屑..

<router-link to="/" class="breadcrumb-item">Home</router-link>
<router-link :to="{name: 'provider-dashboard', params: { id: provider_id }}" class="breadcrumb-item">Provider Dashboard</router-link>
<router-link :to="{name: 'provider-account-dash', params: { provider_id: provider_id, id: account_id }}" class="breadcrumb-item">Account Dashboard</router-link>
<router-link :to="{name: 'resident-profile', params: { account_id: account_id, id: resident_id }}" class="breadcrumb-item">Resident Profile</router-link>

我正在使用看起来像这样的计算道具设置参数值..

account_id: {
    get() {
      return this.$store.getters['AssessmentPlanForm/getAccountId'];
    },
    set(value) {
      this.$store.dispatch('AssessmentPlanForm/setAccountId', value);
    },
  },
  provider_id: {
    get() {
      return this.$store.getters['AssessmentPlanForm/getProviderId'];
    },
    set(value) {
      this.$store.dispatch('AssessmentPlanForm/setProviderId', value);
    }
  },
  resident_id: {
    get() {
      return this.$store.getters['AssessmentPlanForm/getResidentId'];
    },
    set(value) {
      this.$store.dispatch('AssessmentPlanForm/setResidentId', value);
    },
  },

我已确认计算属性的值是正确的，但是当我单击路由器链接面包屑以转到所需位置时，URL 显示 users/function%20Number() 而不是 users/18。

为什么会出现这种情况，如何让 vue-router 正确渲染由计算属性设置的参数？

更新第一条评论

这里是 getter，不，我不会为这些属性这样做。

 getId: (state) => {
    return state.id;
  },
  getProviderId: (state) => {
    return state.provider_id;
  },
  getEmployeeId: (state) => {
    return state.employee_id;
  },
  getAccountId: (state) => {
    return state.account_id;
  },
  getResidentId: (state) => {
    return state.resident_id;
  },
  getSlug: (state) => {
    return state.slug;
  },

从第二条评论更新

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [{
      path: "/",
      name: "home",
      component: Splash,
      prop: true
    },
    {
      path: "/about",
      name: "about",
      component: About,
      prop: true,
    },
    {
      path: "/contact",
      name: "contact",
      component: ContactUs,
      prop: true,
    },
    {
      path: "/pricing",
      name: "pricing",
      component: Pricing,
      prop: true,
    },
    {
      path: "/faq",
      name: "faq",
      component: Faq,
      prop: true
    },
    {
      path: "/polls",
      name: "polls",
      component: Polls,
      prop: true
    },
    {
      path: "/login",
      name: "login",
      component: Login,
      prop: true
    },
    {
      path: "/provider-signup",
      name: "provider-signup",
      component: ProviderSignup,
      prop: true
    },
    {
      path: "/provider-dashboard/:id",
      name: "provider-dashboard",
      component: ProviderDash,
      prop: true
    },
    {
      path: "/providers/:id/edit",
      name: "edit-provider",
      component: EditProvider,
      prop: true
    },
    {
      path: "/provider/:id/employee-invitation",
      name: "employee-invitation",
      component: ProviderEmployeeInvite,
      prop: true
    },
    {
      path: "/employee-signup",
      name: "employee-signup",
      component: EmployeeSignup,
      prop: true
    },
    {
      path: "/employee-dashboard/:id",
      name: "employee-dashboard",
      component: EmployeeDash,
      prop: true
    },
    {
      path: "/employees/:id/edit",
      name: "edit-employee",
      component: EditEmployee,
      prop: true
    },
    {
      path: "/provider/:provider_id/employees",
      name: "employees",
      component: Employees,
      prop: true
    },
    {
      path: "/provider/:provider_id/accounts/new",
      name: "provider-account-signup",
      component: ProviderAccountSignup,
      prop: true
    },
    {
      path: "/providers/:provider_id/accounts/:id",
      name: "provider-account-dash",
      component: ProviderAccountDash,
      prop: true
    },

    {
      path: "/providers/:provider_id/accounts/:account_id/edit",
      name: "edit-provider-account",
      component: EditProviderAccount,
      prop: true
    },

    .
    .
    .
  ]
});

Answer 1

所以答案是修复我的用户错误。我忘记在我正在处理的页面中分配这些属性的值。

答案是加载这些属性的值@created

retrieve(context, record_id) {
    let resident_id = router.currentRoute.params.resident_id;
    Axios.get(`/residents/${resident_id}/assessment_plan_forms/${record_id}`, {
        headers: {
          'Authorization': 'Bearer ' + window.$cookies.get('access_token'),
          'x-amz-acl': 'public-read'
        }
      })
      .then((response) => {
        // let current_user = response.data.locals.current_user;
        let provider = response.data.locals.provider;
        let resident = response.data.locals.resident;
        let account = response.data.locals.account;
        let pdf_url = response.data.locals.pdf_url;
        let date_of_record = response.data.locals.date_of_record;
        let assessment_plan_form = response.data.locals.assessment_plan_form;

        context.dispatch('AssessmentPlanForm/setId', assessment_plan_form.id, {
          root: true
        })
        context.dispatch('AssessmentPlanForm/setProviderId', provider.id, {
          root: true
        })
        context.dispatch('AssessmentPlanForm/setAccountId', account.id, {
          root: true
        })
        context.dispatch('AssessmentPlanForm/setResidentId', resident.id, {
          root: true
        });
        context.dispatch('AssessmentPlanForm/setPdfUrl', pdf_url, {
          root: true
        });
        context.dispatch('AssessmentPlanForm/setDateOfRecord', date_of_record, {
          root: true
        });
        context.dispatch('AssessmentPlanForm/setResidentSignature', resident.full_name, {
          root: true
        });
        // redirect to show page
        router.push({
          name: 'show-assessment-plan',
          params: {
            resident_id: resident.id,
            id: record_id
          }
        })
      })
      .catch((error) => {
        console.log(error);
      })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>

并且#retrieve 在 Created 钩子中被调用，例如：

methods: {
    loadAssessmentPlan() {
      this.$store.dispatch('AssessmentPlanForm/retrieve', this.$route.params.id)
    },
  },
  created() {
    this.loadAssessmentPlan();
  },