初學vue cli, 在main.js文件中接觸到template,這個屬性起到什么作用呢?
做如下訪問:
http://localhost:8080/#/zhuangzi
ZhuangZi.vue內(nèi)容如下:
當App.vue如下時
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>瀏覽器效果:
當App.vue如下時:
<template> <!-- <div id="app"> --> <router-view/> <!-- </div> --> </template>
瀏覽器效果如下:
由此可見, App.vue是一個模板, 所有瀏覽器訪問的內(nèi)容都在這個模板中顯示
1, 所有的內(nèi)容默認都會顯示在該 id="app"的div中
2, 如果不需要放在這個統(tǒng)一的模板中, 可以直接去掉div id = app, 這樣每個vue組件就是一個完全獨立的頁面
3, 所有的組件替換位置為router-view
<router-view/>替換
也可以不使用這個模板如下:
1, 注釋掉template
new Vue({
el: '#app',
router,
components: { App },
// template: '<App/>'
})2,直接在index.html中增加路由
<div id="app"> <router-view/> </div>
