Vue.js如何使用router-link传递params?

时间:2017-10-22 10:29:48

标签: vue.js vue-router vuex

我正在尝试tp传递一个id参数,当用户点击生成的链接但我没有在html中看到它 id应该是在store中设置或初始化的currentUserId ..所以我定义了一个计算的prop和适当的getter('getCurrentUserId'),它从状态中获取currentUserId。 我哪里错了?

<li id="shoppinglists"><a href="#/shoppinglists" class="">Shopping Lists</a></li>

我应该得到:

href="#/shoppinglists/1"

App.vue

<template>
  <div id="app">
    <ul class="navigation">
      <li id="home"><router-link :to="{ name: 'Home' }" >Home</router-link></li>
      <li id="shoppinglists"><router-link :to="{ name: 'ShoppingLists', params: { id: currentUserId } }" >Shopping Lists</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
import store from '@/vuex/store'
import { mapGetters } from 'vuex'

export default {
  name: 'app',
  computed: {
    ...mapGetters({ currentUserId: 'getCurrentUserId' })
  },
  store
}
</script>

vuex/getters.js

import _ from 'underscore'

export default {
  getCurrentUserId: state => state.currentUserId,
  ...
}

vuex / store.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

const state = {
  currentUserId: 1,
  ...
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

1 个答案:

答案 0 :(得分:0)

好了吧..它没有与引用网址连接......但是使用vue网络工具我可以看到'对象:包含路径'/ shoppinglists'和params:object {id:1} ......将心态转换为vue行为并不明显......