vue小項目總結與筆記【二】——vue的單文件組件模板和路由
阿新 • • 發佈:2019-03-18
home out 展現 pat default rip 項目 routes 例如
vue的單文件組件的基本構成是這樣的:
<template> <div> 結構: (註意:template裏只能有一層div,不能出現兩個並列的div ) </div> </template>
// 邏輯 <script> export default { name: ‘組件名‘ } </script>
// css樣式 <style lang=""> </style>
項目打包完成後,可以看到main.js裏有這樣的一段:
new Vue({ el: ‘#app‘, router, store, components: { App }, template: ‘<App/>‘ })
也就是說,項目的根實例為 <div id="app"></div>
再看App.vue文件:
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: ‘App‘
}
</script>
<style>
</style>
這裏的router-view顯示的是當前路由的地址所對應的內容
如果去掉router-view,頁面就是空白的
那,路由(router)是什麽?
字面意思是,根據網址的不同,返回不同的內容給用戶,例如,訪問根路徑‘/’,就訪問主頁,訪問‘/list’,那就訪問列表頁
路由的配置都放在router文件夾下的index.js文件裏:export default new Router({ routes: [{
// 當用戶訪問根路徑‘/’的時候,展現給用戶的是Home這個組件 path:‘/‘, name: ‘Home‘, component: Home }, {
// 當用戶訪問根路徑‘/city’的時候,展現給用戶的是City這個組件
path: ‘/city‘,
name: ‘City‘,
component: City }]
啊~剛開始還覺得有點亂,我總感覺自己說不明白……
vue小項目總結與筆記【二】——vue的單文件組件模板和路由