Vue-router入門
阿新 • • 發佈：2018-06-18
是我 ima PC ebp scrip msg setting mono efault
1.創建一個新項目
cd C:\vue項目
vue init webpack vue1
2.在router/index.js 中 引入HI組件，並且新增加一個對象
3. 編寫HI 組件
<template>
<div class="hello">
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name:‘hi‘,
data () {
return {
msg:‘hi,今晚是世界杯‘
}
}
}
</script>
<style scoped>
</style>
4.
router-link制作導航
現在通過在地址欄改變字符串地址，已經可以實現頁面內容的變化了。這並不滿足需求，我們需要的是在頁面上有個像樣的導航鏈接，我們只要點擊就可以實現頁面內容的變化。制作鏈接需要<router-link>標簽，我們先來看一下它的語法。
<router-link to="/">[顯示字段]</router-link
to：是我們的導航路徑，要填寫的是你在router/index.js文件裏配置的path值，如果要導航到默認首頁，只需要寫成 to=”/” ，
[顯示字段] ：就是我們要顯示給用戶的導航名稱，比如首頁 新聞頁。
明白了router-link的基本語法，我們在 src/App.vue文件中的template裏加入下面代碼，實現導航。
<p>導航 ： <router-link to="/">首頁</router-link> <router-link to="/hi">Hi頁面</router-link> </p>
可以看看效果了：
2018-06-18 00:17:38
Vue-router入門