router:根據不同的地址跳轉到不同的頁面
一、vue-router的使用
1.下載路由模塊 npm vue-router --save
2.在router.js中
先引入路由 import Router from 'vue-router'
接着通過use在vue全局注冊使用 Vue.use(Router)
最后將路由表導出 export default new router({ })
3.在main.js中引入路由組件 import router from './router'
4.以參數的形式寫到根目錄中 在vue實例對象中聲明router
5.最后在App.vue的模板中設置路由出口 <router-view></router-view>
二、添加組件步驟:
1.在src的components下添加組件 apple.vue
2.在app.vue的script標簽
引入 新添的組件 import apple from './componets/apple'
在data后注冊每個組件 components:{apple}
在template標簽里用組件名寫一個標簽<apple></apple>
3.通過命令npm run dev 運行項目查看組件是否添加成功
三、將組件添加到路由表的步驟:
1.安裝路由 npm install vue-router --save
2.將components里的組件引入配置到router.js中
先引入組件 import...
再配置路由路徑
3.在main.js中使用router
先引入路由 import...
再在vue實例中指定router
4.在App.vue中模板中添加路由鏈接 router-link和出口router-view