vue2之 missing param for named route "xxxx"

场景：

解决方法：可以做的是将其包含router-link在适当的位置v-if，以便在您的异步数据实际到达之前不会尝试渲染。

html代码：

<div id="app" class="container">
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

<script  type="text/x-template" id="joke">
    <div class="container">
         bar  <br>
       <template v-if="joke"> 
           {{joke.joke}}
           <router-link :to="{name: 'joke', params: {number: joke.id}}">{{joke.id}}</router-link>
    </template>
  </div>
</script>

js

const Foo = { template: '<div>foo</div>' }
const Bar = { 
  template: '#joke',
  data () {
    return {
      joke: null
    }
  },
  methods: {
    get: function () {
      this.$http.get('https://api.icndb.com/jokes/random').then((response) => {
        this.joke = response.body.value
        console.log(this.joke)
      }, (response) => {
        console.log(response)
      });
    }
  },
  mounted () {
    this.get()
  }
}
const funny = {
  template: '<div> {{id}}</div>',
  computed: {
    id () {
      return this.$route.params.number
    }
  }
}

const routes = [
  { 
    path: '/foo', 
    component: Foo,
    name: 'foo'
  },
  { 
    path: '/bar', 
    component: Bar,
    name: 'bar'
  },
  {
    path: '/joke/:number',
    name: 'joke',
    component: funny
  }
]

const router = new VueRouter({
  routes 
})

const app = new Vue({
  router
}).$mount('#app')

 

转载于:https://www.cnblogs.com/raind/p/9274732.html