【Vue.js／Vuetify/Vue CLI】v-forで作成したカードリストからのページ遷移方法

環境

・Vue 2
・vue@cli 4.5.9
・Vuetify 2.4.0

###状況
・Vue CLI/Vuetifyを使った「フェス／ライブ情報まとめアプリ」をSPAとして開発中です。
・フリーワード検索機能は実装済みです。
⇒computedオプション内のsearchResultプロパティで機能追加
・<script>内dataオプションにあるresultsプロパティに記述した内容を、<template>側の<v-card>でv-forを回してリンクカードを作って検索結果を表示しています。
※Search.vue↓

実現したいこと

検索結果表示時のリンクカード選択時に別のvueファイルへ遷移させたい
Search.vue(リンクカード選択)⇒Page1.vue(別ファイル)
※Page1ページ↓

該当のソースコード

Search.vue(現在いる場所)

Vue
1        <v-col
2          cols="6"
3          md="8"
4        >
5          <v-card
6            class="pa-2"
7            tile
8          >
9          <div>
10            <h2>フリーワード検索</h2>
11            <div class="t-c-search">
12              <v-col cols="12">
13                <v-text-field
14                  v-model="keyword"
15                  label="キーワードを入力"
16                  placeholder=""
17                  filled
18                  rounded
19                  type="text"
20                ></v-text-field>
21              </v-col>
22            </div>
23            <v-divider></v-divider>
24            <h2 class="mt-4 mb-4">検索結果</h2>
25            <!-- <a :src="result.link"> -->
26            <a href="#">
27              <v-card :loading="loading" class="mx-auto mt-2 mb-4" v-for="(result, key) in searchResult" :key="key">
28                <div class="d-flex">
29                  <v-avatar class="ma-3" size="125" tile>
30                    <v-img :src="result.imageUrl2"></v-img>
31                  </v-avatar>
32                  <div>
33                    <v-card-title v-html="highLight(result.title)"></v-card-title>
34                    <v-card-text>
35                      <v-row align="center" class="mx-0">
36                        <v-rating :value="4.5" color="amber" dense half-increments readonly size="14">
37                        </v-rating>
38                        <div class="grey--text ml-4">
39                          4.5 (413)
40                        </div>
41                      </v-row>
42                      <div class="my-4 subtitle-1">
43                      </div>
44                      <div v-html="highLight(result.content)"></div>
45                    </v-card-text>
46                  </div>
47                </div>
48              </v-card>
49            </a>
50            <div class="text-center">
51              <v-pagination
52                v-model="page"
53                :length="4"
54                circle
55              ></v-pagination>
56            </div>
57          </div>
58          </v-card>
59        </v-col>
60
61<script>
62import Loading from '@/components/Loading'
63
64export default {
65  data:() => ({
66    keyword: '',
67    results: [
68        { title: '【失敗しない！】',
69         content: '初心者必見！フェスに持っていくもの10選！',
70         imageUrl2: require('../assets/images/top_image4.jpg'),
71          },
72        { title: '【これだけ気を付けよう！】',
73         content: 'フェスを楽しむための注意点3選！',
74         imageUrl2: require('../assets/images/top_image4.jpg')
75          },
76        { title: '【夏フェス必須！】',
77         content: 'あると便利なグッズを紹介！',
78         imageUrl2: 'https://cdn.vuetifyjs.com/images/cards/cooking.png',
79          },
80        { title: '【そもそも「邦ロック」とは？】',
81         content: '「邦ロックとはどんなジャンル？」について運営者個人的見解を述べます！',
82         imageUrl2: 'https://cdn.vuetifyjs.com/images/cards/cooking.png',
83          },
84        { title: '【これだけ気を付けよう！】',
85         content: 'フェスを楽しむための注意点3選！',
86         imageUrl2: 'https://cdn.vuetifyjs.com/images/cards/cooking.png',
87          },
88        { title: '【夏だけじゃない！】',
89         content: '寒いからこそフェス！屋内フェスの魅力をご紹介！',
90         imageUrl2: 'https://cdn.vuetifyjs.com/images/cards/cooking.png',
91          },
92        { title: '【どのフェス・イベントがいいの？】',
93         content: '初心者向けフェス・イベントをご紹介！',
94         imageUrl2: 'https://cdn.vuetifyjs.com/images/cards/cooking.png',
95          },
96        { title: '【完全攻略！】',
97         content: '初心者邦ロックロードマップ！',
98         imageUrl2: 'https://cdn.vuetifyjs.com/images/cards/cooking.png',
99          }
100        ],
101  }),
102    computed: {
103       searchResult(){
104        let searchWord = this.keyword.trim()
105        if (searchWord === '') return this.results;
106        return this.results.filter(result => {
107            return result.title.includes(searchWord) ||
108            result.content.includes(searchWord) 
109          })
110        }
111      },
112      methods:{
113        highLight(text){
114          let searchWord = this.keyword.trim()
115          if (searchWord === '') return text
116          if(!text.includes(searchWord)) return text
117          const re = new RegExp(searchWord, 'ig');
118          return text.replace(re,function(search){
119            return '<span style="background-color:yellow; fontweight;bold">'+search + '</span>'
120          })
121        }
122      },
123};
124

Page1.vue(遷移したいページ)

vue
1<template>
2  <div>
3    <h1>ここはPage1ページです。</h1>
4  </div>
5</template>
6
7<script>
8  export default {
9    data () {
10
11},
12  }
13</script>
14
15<style>
16
17</style>

router.js(参考)

vue
1import Vue from 'vue'
2import VueRouter from 'vue-router'
3
4Vue.use(VueRouter)
5
6const routes = [
7  {
8    path: '/',
9    name: 'Home',
10    component: Home
11  },
12  {
13    path: '/search',
14    name: 'search',
15    component: () => import('../views/Search.vue')
16  },
17  {
18    path: '/page1',
19    name: 'Page1',
20    component: () => import('../views/Page1.vue')
21  },
22]
23
24const router = new VueRouter({
25  mode: 'history',
26  base: process.env.BASE_URL,
27  routes
28})
29
30export default router
31

試したこと

Searchページの以下コードを修正
・<template>側
リンクカードを作っている<a href="#">を<a :src="result.link">に変更

・<script>側
dataオプション内resultsプロパティにlink:require('./Page1')追加

変更前↓

 { title: '【失敗しない！】',
   content: '初心者必見！フェスに持っていくもの10選！',
   imageUrl2: require('../assets/images/top_image4.jpg'),
   },

変更後↓

 { title: '【失敗しない！】',
   content: '初心者必見！フェスに持っていくもの10選！',
   imageUrl2: require('../assets/images/top_image4.jpg'),
　 link: require('./Page1')  //←追加
   },

残念ながらルーティングしませんでした。。。