Question

的index.html

<html>    
    <head>
      <script src="https://unpkg.com/vue"></script>
      <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script>
      <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css">
      <style>
        #example-1 {
          color: #fff;
          text-align: center;
        }

        #example-1 .flex {
          margin-bottom: 16px;
        }
      </style>
      <script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
    </head>

    <body>

      <div id="app">
        <p>
          <router-link to="/page1/posts">Login..</router-link>
        </p>
        <p>
          <router-link to="/page2/posts">List Of all public posts</router-link>
        </p>
        <v-container fluid>
          <router-view></router-view>
        </v-container>
      </div>

      <script src="app.js"></script>

    </body>
<html>

app.js

var firstComponent = Vue.component('component1', {
    'template': `<div>
    <div><div id="example-3">
    <v-container fluid>

      <v-layout row>

        <v-flex xs6 offset-xs3>
        <v-card dark class="primary">
         <v-subheader>Login</v-subheader>
         <v-card class="grey lighten-4 elevation-0">
    <v-card-text>
      <v-container fluid>

        <v-layout row>
          <v-flex xs4>
            <v-subheader>UserName</v-subheader>
          </v-flex>
          <v-flex xs8>
            <v-text-field
              name="input-2"
              class="input-group--focused">
            </v-text-field>
          </v-flex>
        </v-layout>
        <v-layout row>
          <v-flex xs4>
            <v-subheader>Password</v-subheader>
          </v-flex>
          <v-flex xs8>
            <v-text-field
              name="input-3"
              type = "password"
              class="input-group--focused">
            </v-text-field>
          </v-flex>
        </v-layout>
        <div>
              <v-btn primary dark>Normal</v-btn>
     </div>
      </v-container>

    </v-card-text>
  </v-card>
        </v-card>
      </v-flex>


      </v-layout>


    </v-container>
  </div>
      </div>
      </div>`,


    methods: {
        clickMethod: function () {
            alert('componeent1');
        }
    },
    created() {
        //this.fetchData();
    },
})
var secondComponent = Vue.component('component2', {
    'template': `  <div>
                    <div>
                    <div v-on:click="clickMethod2">List of all posts</div><div v-for = 'p in post'>
                     <v-container fluid>
                      <v-layout row>
                      <v-flex xs6 offset-xs3>
                    <v-card>
                    <v-card-title primary-title>
                    <div>
                    <h3 class="headline mb-0"><span>{{p.id}}</span>{{p.title}}</h3>
                    <div>{{p.body}}</div>
                    </div>
                    </v-card-title>
                    <v-card-actions>
                    <v-btn flat class="orange--text">Share</v-btn>
                    <p class="orange--text btn btn--flat"><router-link to = "/inpost/{{p.id}}">Explore</router-link></p>
                    </v-card-actions>
                    </v-card>
                    </v-flex>
                    </v-layout>
                     </v-container>
                    </div>
                    </div>
                </div>`,
    data: function () {
        return {
            'post': null,
            'error': null
        }
    },
    methods: {
        clickMethod2: function () {
            alert('componeent2');
        },
        fetchData: function () {
            var self = this._data;
            axios.get('http://jsonplaceholder.typicode.com/' + this.$route.params.id)
                .then(response => this.post = response.data)

        }
    },
    created() {
        //alert('in created 2');
        this.fetchData();
    },

})


var individualPostComp = Vue.component('indPostComp',{
    'template' : `<div>
                    <div>
                        <v-container fluid>
                            <v-layout row>
                                <v-flex xs6 offset-xs3>
                                    <v-card>
                                        <v-card-title primary-title>
                                            <div>
                                                 <h3 class="headline mb-0">component 3<span></span></h3>
                                                 <div></div>
                                            </div>
                                        </v-card-title>
                                        <v-card-actions>
                                            <v-btn flat class="orange--text">Share</v-btn>
                                            <v-btn flat class="orange--text">Comment</v-btn>
                                            <v-btn flat class="orange--text">Report</v-btn>
                                        </v-card-actions>
                                     </v-card>
                                </v-flex>
                             </v-layout>
                            </v-container>
                        </div>
                    </div>`,
                    created(){
                        console.log(this.$route.params.id)
                    }
})


const routes = [
    { path: '/page1/:id', component: firstComponent },
    { path: '/page2/:id', component: secondComponent },
  { path: '/inpost/:id', component: individualPostComp},
]
const router = new VueRouter({
    routes
})
var app = new Vue({
    router,
    el: "#app",
}).$mount('#app')

在component2模板中有一个p标记，我希望动态解析路由器链接（'/inpost/{{p.id}}'）。但是这段代码给了我一个编译错误。

非常感谢任何帮助。

Answer 1

无需使用{{ }}进行文本插值。你可以这样做

<p class="orange--text btn btn--flat"><router-link :to = "'/inpost/' + p.id">Explore</router-link></p>

VUE路由;试图解析＆＃39; link-router to＆＃39;动态

1 个答案: