iT邦幫忙

第 11 屆 iThome 鐵人賽

2
自我挑戰組

新手初探 Vue系列 第 30

鐵人賽Day31 - 新增路由路徑及連結

  • 分享至 

  • xImage
  •  

按照鐵人賽的規則,只要發文30篇即可,但是我不小心把 Day5 給刪了,所以才會有 Day31 的出現 /images/emoticon/emoticon01.gif
雖然我中間因為忘記發文早已失去資格了 /images/emoticon/emoticon02.gif
但是這裡我還是會繼續寫下去把我學習 Vue 的筆記給整理過來,好梳理自己的思緒

接下來這篇要講到 Vue Router 新增路由路徑及連結
我們在 src 資料夾底下的 components 資料夾底下新增一個 pages 資料夾用於管理分頁元件
接著把 HelloWorld.vue 另存新檔到 pages 資料夾底下為 page.vue
裡面的內容留下

<template>
	<div class="hello">
	</div>
</template>

<script>
export default {
	data() {
	return
	}
}
</script>

即可

接著我們把 Bootstrapcard 貼到 page 元件內:

<template>
    <div class="hello">
        <div class="card" style="width: 18rem;">
            <img src="" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card 1</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
	return
	}
}
</script>

接著我們要回到 src 資料夾底下的 router/index.jspage 元件載入進來:

import Page from '@/components/pages/page';

這時候我們就可以在底下再新增一個路徑:

export default new VueRouter({
	routes: [
		{
            ...
        },
		{
			name: '分頁',
			path: '/page',
			component: Page,
		}
	],
});

此時運行起來,把網址改成 locahost:8080/#/page
就可以看到 page 元件了

接著我們來做連結的功能,到 App.vue<div id="app"></div> 底下新增 Bootstrapnavbar
接著把 .nav-item 底下的 <a> 改成

<router-link to="/page"></router-link>

這時候點擊這個連結,我們就可以直接切換到 page 元件


上一篇
鐵人賽Day30 - Vue Router 及配置路由文件
系列文
新手初探 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-02-19 06:07:47

雖然斷賽,但仍繼續產出
恭喜完成三十篇!!! /images/emoticon/emoticon32.gif

謝謝喔 /images/emoticon/emoticon01.gif

我要留言

立即登入留言