news.vue

<template>
  <q-page padding>
    <!-- content -->
  <q-card inline @click.native="handler1">
  <q-card-media>
    <img src="~assets/quasar-logo-full.svg">
  </q-card-media>
  <q-card-title>
    Cafe Basilico
    <div slot="right" class="row items-center">
      <q-icon name="place" /> 250 ft
    </div>
  </q-card-title>
  </q-card>

  <q-card inline :to="{ name: 'newsDetail' }">
  <q-card-media>
    <img src="~assets/quasar-logo-full.svg">
  </q-card-media>
  <q-card-title>
    Cafe Basilico
    <div slot="right" class="row items-center">
      <q-icon name="place" /> 250 ft
    </div>
  </q-card-title>
  </q-card>

  </q-page>
</template>

<script>
// console.log( "Stack" + window.history.length)
export default {
  name: 'NewsIndex',
  methods: {
    handler1: function (data) {
      console.log('hello')
      this.$router.push('/news/detail')
      // $router.push('/index')
    }
  }
}
</script>

<style>
</style>

newsDetail.vue

<template>
  <q-page padding>
    <!-- content -->
    <q-layout-header>

      <q-toolbar
        color="primary"
        :glossy="$q.theme === 'mat'"
        :inverted="$q.theme === 'ios'"
        shrink
      >
      <q-btn
        v-go-back=" '/news/' "
        color="primary"
        icon="fa fa-chevron-left"
        round
        flat
      />
      <q-toolbar-title>
        News Detail
      </q-toolbar-title>
      <q-btn flat round dense icon="" />
      </q-toolbar>
    </q-layout-header>

    <q-card padding inline class="q-ma-sm">
      <q-card-media>
        <q-parallax src="statics/parallax1.jpg" :height="150">
          <div slot="loading">Loading...</div>
        </q-parallax>
      </q-card-media>
      <q-card-title>
        Parallax
        <span slot="subtitle">Subtitle</span>
      </q-card-title>
      <q-card-separator />
      <q-card-actions>
        <q-btn flat>Action 1</q-btn>
        <q-btn flat>Action 2</q-btn>
      </q-card-actions>
    </q-card>

  </q-page>
</template>

<script>
export default {
  name: 'NewsDetailVue',
  pageTitle: 'Detail Page!!!'
}
</script>

<style>
</style><template>
  <q-page padding>
    <!-- content -->
    <q-layout-header>

      <q-toolbar
        color="primary"
        :glossy="$q.theme === 'mat'"
        :inverted="$q.theme === 'ios'"
        shrink
      >
      <q-btn
        v-go-back=" '/news/' "
        color="primary"
        icon="fa fa-chevron-left"
        round
        flat
      />
      <q-toolbar-title>
        News Detail
      </q-toolbar-title>
      <q-btn flat round dense icon="" />
      </q-toolbar>
    </q-layout-header>

    <q-card padding inline class="q-ma-sm">
      <q-card-media>
        <q-parallax src="statics/parallax1.jpg" :height="150">
          <div slot="loading">Loading...</div>
        </q-parallax>
      </q-card-media>
      <q-card-title>
        Parallax
        <span slot="subtitle">Subtitle</span>
      </q-card-title>
      <q-card-separator />
      <q-card-actions>
        <q-btn flat>Action 1</q-btn>
        <q-btn flat>Action 2</q-btn>
      </q-card-actions>
    </q-card>

  </q-page>
</template>

<script>
export default {
  name: 'NewsDetailVue',
  pageTitle: 'Detail Page!!!'
}
</script>

<style>
</style>