您好,登錄后才能下訂單哦!
vue2.0中怎么利用vue-router構(gòu)建一個列表頁,針對這個問題,這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
一: 環(huán)境搭建
使用vue-cli腳手架工具構(gòu)建
安裝 vue-cli
npm install -g vue-cli
使用vue-cli初始化項(xiàng)目
vue init demo1
進(jìn)到目錄
cd demo1
安裝依賴
npm install
開始運(yùn)行
npm run dev
瀏覽器訪問http://localhost:8080
1、首先會打開首頁 也就是我們看到的index.html文件
2、使用webpack打包之后默認(rèn)加載main.js文件并將其引入到index.html文件中
二: 開發(fā)
在main.js中可以引入相關(guān)模塊以及組件
import Vue from 'vue' import App from './App' import router from './router' //這里引入的是router目錄,會默認(rèn)識別里面的index.js文件(不能是其他名字) // 引入并使用vue-resource網(wǎng)絡(luò)請求模塊 import VueResource from 'vue-resource' Vue.use(VueResource)
實(shí)例化vue對象配置選項(xiàng)路由及渲染App組件
new Vue({ el: '#app', //這里綁定的是index.html中的id為app的div元素 router, render: h => h(App) // 這里的render: h => h(App)是es6的寫法 // 轉(zhuǎn)換過來就是: 暫且可理解為是渲染App組件 // render:(function(h){ // return h(App); // }); })
App.vue文件是我們的組件入口,之后所有的開發(fā)在這里面進(jìn)行
<template> <div id="app"> <div class="nav"> <!-- 使用 router-link 組件來導(dǎo)航. --> <!-- 通過傳入 `to` 屬性指定鏈接. --> <!-- <router-link> 默認(rèn)會被渲染成一個 `<a>` 標(biāo)簽 --> <ul> <li><router-link to="/home">Home</router-link></li> <li><router-link to="/about">About</router-link></li> </ul> </div> <div class="main"> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> </div> </template> <script> export default { name: 'app', components: { } } </script> <style> body{ background-color: #f8f8ff; font-family: 'Avenir', Helvetica, Arial, sans-serif; color: #2c3e50; } .nav{ position: fixed; width: 108px; left: 40px; } .nav ul{ list-style: none; margin: 0; padding: 0; } .nav ul li{ width: 108px; height: 48px; line-height: 48px; border:1px solid #dadada; text-align: center; } .nav ul li a{ text-decoration: none; } .main{ height: 400px; margin-left: 180px; margin-right: 25px; } </style>
要使用路由我們首先要在router/index.js文件中創(chuàng)建路由并配置路由映射 ,并通過export輸出router到main.js文件中
// 這里面負(fù)責(zé)寫路由映射,便于管理
import Home from '@/components/Home' import VueRouter from 'vue-router' Vue.use(VueRouter) // 創(chuàng)建路由實(shí)例并配置路由映射 const router = new VueRouter({ mode: 'history', routes: [ { path: '/', name: 'Home', component: Home }, { path: '/', name: 'About', component: About }, ] }) // 輸出router export default router;
上面配置了2個組件映射 分別Hme.vue組件和About組件,配置好之后我們就可以開始使用路由了
<!-- 使用 router-link 組件來導(dǎo)航. --> <!-- 通過傳入 `to` 屬性指定鏈接. --> <!-- <router-link> 默認(rèn)會被渲染成一個 `<a>` 標(biāo)簽 --> <ul> <li><router-link to="/home">Home</router-link></li> <li><router-link to="/about">About</router-link></li> </ul> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view>
點(diǎn)擊home和about導(dǎo)航會映射到對應(yīng)的組件,然后將組件渲染在</router-view>這里面
到此,整個流程我們已經(jīng)走通了。
接下來我們使用vue-resource網(wǎng)絡(luò)插件動態(tài)加載數(shù)據(jù)并顯示出來
1、安裝插件
npm install vue-resource --save
2、在main.js文件中引入并使用vue-resource網(wǎng)絡(luò)請求模塊
import VueResource from 'vue-resource' Vue.use(VueResource)
3、創(chuàng)建Home組件
我們需要在created鉤子函數(shù)中去請求網(wǎng)絡(luò),這里我們使用豆瓣的API去請求電影列表數(shù)據(jù),請求成功之后我們將其數(shù)據(jù)顯示到頁面中
<template> <div class="home"> <h2>{{ msg }}</h2> <ul> <li v-for="article in articles"> <div class="m-img inl-block"><img v-bind:src="article.images.small"/></div> <div class="m-content inl-block"> <div>{{article.title}}</div> <div>年份:{{article.year}}</div> <div>類型:{{article.subtype}}</div> </div> </li> </ul> </div> </template> <script> // mounted 鉤子函數(shù) 這里去請求豆瓣數(shù)據(jù) export default { name: 'home', data () { return { msg: '電影列表', articles:[] } }, created:function(){ //這里mounted和created生命周期函數(shù)區(qū)別 this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, { headers: { }, emulateJSON: true }).then(function(response) { // 這里是處理正確的回調(diào) console.log(response); this.articles = response.data.subjects // this.articles = response.data["subjects"] 也可以 }, function(response) { // 這里是處理錯誤的回調(diào) console.log(response) }); } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> ul{ list-style: none; margin: 0; padding: 0; } ul li{ border-bottom: 1px solid #999; padding: 10px 0; } .inl-block{ display: inline-block; } .m-img{ } .m-content{ margin-left: 20px; } </style>
關(guān)于vue2.0中怎么利用vue-router構(gòu)建一個列表頁問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。