I took an example of routing on vue.js and decided to add a parameter mapping to it. I can not figure it out, but only one thing works separately. Here is an example.

<script type="text/javascript" src="static/js/library/vue.min.js"></script> <script type="text/javascript" src="static/js/library/router.js"></script> <div id="app"> <h1>Hello App! {{Myvalue1}}</h1> <p> <!-- use v-link directive for navigation. --> <a v-link="{ path: '/foo' }">Go to Foo</a> <a v-link="{ path: '/bar' }">Go to Bar</a> </p> <!-- route outlet --> <router-view></router-view> </div> <script> var Foo = Vue.extend({ template: '<p>This is foo!</p>' }) var Bar = Vue.extend({ template: '<p>This is bar!</p>' }) var App = Vue.extend({ el: '#app', data: { Myvalue1: 'Roman' }}) var router = new VueRouter({ history:true }) router.map({ '/foo': { component: Foo }, '/bar': { component: Bar } }) router.start(App, '#app') </script>

    1 answer 1

    It is necessary to change the data, so that the value returned by the function

     var App = Vue.extend({ el: '#app', data: function() { return { Myvalue1: 'Roman' } } })