zoukankan      html  css  js  c++  java
  • 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')
  • 相关阅读:
    python 不可变类型
    python 不定长参数
    Codeforces Round #749
    [提高组集训2021] Round1
    AtCoder Regular Contest 128
    [提高组互测] Day6
    [提高组互测] Day5
    [提高组互测] Day1
    [提高组互测] Day2
    [提高组集训2021] 一拳超人
  • 原文地址:https://www.cnblogs.com/raind/p/9274732.html
Copyright © 2011-2022 走看看