vue-routerの簡単な例

  
    
    
    
    

    
    
    
  
  
    

      

        
         1 
         2 
         3 
         4 
      
      
    

    
      <div class="p1"> 1 ， ：{{name}}</div>
    
    
      var p1view = Vue.component("p1view", {
        template: "#p1_template",
        data: function() {
          return {
            name: "wallimn"
          };
        }
      });
    
    
      <div class="p2"> 2 ， ：{{blog}}</div>
    
    
      var p2view = Vue.component("p2view", {
        template: "#p2_template",
        data: function() {
          return {
            blog: "http://wallimn.iteye.com"
          };
        }
      });
    
    
      <div class="p3"> 3 ， ：{{today}}</div>
    
    
      var p3view = Vue.component("p3view", {
        template: "#p3_template",
        data: function() {
          return {
            today: "2019-03-04"
          };
        }
      });
    

    
      <div class="p4"> 4 ， ：id={{id}}</div>
    
    
      var p4view = Vue.component("p4view", {
        template: "#p4_template",
        data: function() {
          return {
            id: null
          };
        },
        mounted: function() {
          this.id = this.$route.params.id;
        }
      });
    

    
      /*
       *  
       */
      var router = new VueRouter({
        routes: [
          { path: "/p1link", component: p1view },
          { path: "/p2link", component: p2view },
          { path: "/p3link", component: p3view },
          { path: "/p4link:id", component: p4view } // 
        ]
      });

      // Vue 
      var doit = new Vue({
        el: "#app",
        data: {},
        methods: {
          showView: function() {
            this.$router.push({ path: "/p3link" });
          },
          showViewEx: function(id) {
            this.$router.push({ path: `/p4link${id}` }); // 
          }
        },
        router // 
      });