I have been using VUE to do single-page application, but now the company needs to develop multi-page, so I spent time to study how vUE configures multi-page, and specially recorded it.

The difference between single and multi-page applications

  • Single page Application (SPA) : The entire application is done on a single page. The user experience is good, because all resources are loaded on one page, so the first screen rendering may be slow without optimization. Secondly, SPA is not conducive to SEO.
  • Multi-page application (MPA) : An application consists of multiple pages. Switching pages needs to be done with the href attribute of a tag. The page to be jumped to needs to load the resources needed by the page, so the switching page will not be smooth.

As for the more detailed differences, there are plenty of answers online.

Simple configuration

Use vue- CLI to generate a simple project, hit vue create XXX and I directly select the default creation method.

After the project is generated, delete the app. vue and main.js files and create a new vue.config.js file in the root directory

Here is my demo:

Create a pages page under the SRC directory to manage the page folder, and then create a XXX directory under the Pages directory. This XXX directory is used to store your pages, similar to the Pages directory of wechat mini program.

For example, I have two directories here (which need 3 basic files, HTML, JS, vue).

Configure the vue. Config. Js

Next, according to the official website to the example to configure the entrance page, vUE official website example

This structure is also very similar to the configuration of wechat applets, according to the directory structure above me, the final configuration looks like:

Module. exports = {devServer: {publicPath: '/', index: 'test.html'}, pages: {test: {entry: '. / SRC/pages/test/test. The js', / / the must have, shall fill in the template: 'the. / SRC/pages/test/test. The HTML', filename: 'test. HTML, title: 'test page' // chunks: ['chunk-vendors', 'chunk-common', 'test'] If specified here, remember that the last entry of the array is the current filename}, test2: {entry: './src/pages/test2/test2.js', template: './src/pages/test2/test2.html', filename: 'test2.html', title: 'test2 page', chunks: ['chunk-vendors', 'chunk-common', 'test2'] } } }Copy the code

Next, configure the 3 pages in the test directory. The other directories have the same configuration, so I won’t configure them one by one.

test.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="test"></div> </body> </html>Copy the code

$mount(‘#test’) 

import Vue from 'vue'
import Test from './test.vue'

Vue.config.productionTip = false

new Vue({
    render: h => h(Test)
}).$mount('#test')
Copy the code

test.vue

<template> <div class="test2"> {{MSG}} <a href="test2.html"> go to test2 page</a> </div> </template> <script> export default { Data (){return{MSG: 'here is test page'}}} </script>Copy the code

The other pages are the same, after the other pages are configured, you can happily hit NPM Run serve.

Effect:

conclusion

  • After the development in the page directory xxx.vue page development line, here the gameplay is back to the familiar single page mode, the above route can be vue-router, as long as the vUE instance in xxx.js file is configured, of course, vuex words the same. In fact, the multi-page gameplay is very simple.

  • To jump between multiple pages, you can use the A label or the Windon. open method. The router and VUex between multiple pages are not shared.

  • Pages configuration in vue. Config. js may be troublesome as the number of pages increases. Glob can be used to deal with file directories later. I won’t tell you much here.