-1
のindex.html「へのリンク-ルータ」を解析しようVUEルーティング。動的
<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>
私は、ルータのリンクを動的に解析したいpタグが（そこにあるコンポーネント2テンプレートに
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')
をapp.js '/inpost/{{p.id}}'）。しかし、このコードは私にコンパイルエラーを与えています。
ご協力いただければ幸いです。
のようにそれを行うことができます私はこれを行うときに、URLに直接「/'/inpost/'+p.id」を追加して、空のコンポーネント「indPostCompが」ではありませんhelp.Butてくれてありがとうレンダリングされる。 –
IndPostCompに表示する完全なURLは何ですか？ –
"p.id"は1,2 etc（post id）のような値に解決されなければならず、そのリンクをクリックするとポストの特定のページにリダイレクトする必要があります –