Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use vue-router to build a list page in vue2.0". In the daily operation, I believe many people have doubts about how to use vue-router to build a list page in vue2.0. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "how to use vue-router to build a list page in vue2.0". Next, please follow the editor to study!

One: environmental construction

Build using the vue-cli scaffolding tool

Install vue-cli

Npm install-g vue-cli

Initialize the project using vue-cli

Vue init demo1

Go to the directory

Cd demo1

Installation dependency

Npm install

Start running

Npm run dev

Browsers access http://localhost:8080

1. First, we will open the home page, that is, the index.html file we see.

2. After packaging with webpack, the main.js file is loaded by default and introduced into the index.html file

Second: development

Related modules and components can be introduced into main.js.

Import Vue from 'vue'import App from'. / App'import router from'. / router' / / the router directory is introduced here, and the index.js file (cannot be another name) / / is introduced and used in the vue-resource network request module import VueResource from 'vue-resource'Vue.use (VueResource).

Instantiate vue object configuration options routing and rendering App components

New Vue ({el:'# app', / / what is bound here is the div element router where id in index.html is app, render: h = > h (App) / / render: h = > h (App) is the writing / / translation of es6: temporarily it can be understood as rendering App component / / render: (function (h) {/ / return h (App); / /})

The App.vue file is our component entry, and then all the development is carried out in it.

Home About export default {name: 'app', components: {} 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: 48pxborderrole 1px solid # dadada Text-align: center;} .nav ul li a {text-decoration: none;} .main {height: 400px; margin-left: 180px; margin-right: 25px;}

To use routing, we first create the route in the router/index.js file and configure the route map, and output the router to the main.js file through export

/ / it is responsible for writing route maps for easy management.

Import Home from'@ / components/Home'import VueRouter from 'vue-router'Vue.use (VueRouter) / / create a route instance and configure the route map const router = new VueRouter ({mode:' history', routes: [{path:'/', name: 'Home', component: Home}, {path:' /', name: 'About', component: About},]}) / / output routerexport default router

There are two component mappings, Hme.vue component and About component, which are configured above. Once configured, we can start using routing.

Home About

Click home and about navigation to map to the corresponding component, and then render the component in it

At this point, we have gone through the whole process.

Next, we use the vue-resource network plug-in to dynamically load the data and display it.

1. Install the plug-in

Npm install vue-resource-save

2. Introduce and use vue-resource network request module in main.js file.

Import VueResource from 'vue-resource'Vue.use (VueResource)

3. Create Home components

We need to request the network in the created hook function. Here we use Douban's API to request movie list data. After the request is successful, we display the data in the page.

{{msg}}

{{article.title}} year: {{article.year}} Type: {{article.subtype}} / / mounted hook function here to request Douban data export default {name: 'home', data () {return {msg:' movie list', articles: []}} Created:function () {/ / here the mounted and created lifecycle functions distinguish this.$http.jsonp ('https://api.douban.com/v2/movie/top250?count=10', {}, {headers: {}, emulateJSON: true}). Then (function (response) {/ / here is the correct callback console.log (response) This.articles = response.data.subjects / / this.articles = response.data ["subjects"] can also}, function (response) {/ / here is the callback console.log (response) that handles the error);}} 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;} at this point, the study on "how to use vue-router to build a list page in vue2.0" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.