VUE 路由及元件使用
阿新 • • 發佈:2018-12-04
一、元件
在src裡面components資料夾下面新建一個你需要的元件,例如navs這樣一個元件。在navs.vue裡面寫你的結構樣式等內容封裝一個導航的模組;
然後在需要你入的檔案裡面引入,例如app.vue下面
<script>
import navs from './components/navs/navs';
export default {
name: 'app',
components:{
navs
}
}
</script>
這樣定義完後,看你哪個版塊需要就在那個版塊寫一下<navs></navs>就可以成功的引入你的新定義的元件了
二、路由
在src裡面有一個router的資料夾,裡面有個index.js檔案,接下來把你需要連結跳轉的版塊在index.js裡面引入;
import score from'@/components/competition/score'
export default new Router({
routes: [
{
path: '/score',
name: '',
component: score
}
]
})
html 導航裡面你就可以直接用
<router-link to="/score">列表 </router-link