1. Initialization preparations

1.1 Create a default project based on vue scaffolding

Command:

$ vue create test
Copy the code

1.2 Delete Unnecessary Content

The contents of the directory and files are as follows. In order to facilitate the preview, only the App page is left, and all the superfluous contents are deleted

Configuration and use of routes

  • Run the NPM command to install vue-router and restart the service
$ npm install vue-router
Copy the code
  • Create a pages folder in the SRC directory and create home.vue and about. vue components in this folder

  • In real projects, routes are generally centrally managed under the Router directory. Therefore, you need to create a folder named Router in the SRC directory and then create index.js in the router file to centrally manage route information

Code:

import Vue from "vue";
import VueRouter from "vue-router";
/ / use VueRouter
Vue.use(VueRouter);

// Import the components to be configured with routes
import Home from '@/pages/Home.vue';
import About from '@/pages/About.vue';

// Configure routing information. Path matches the to attribute on router-link. Component points to the page component
const routes = [
  { path: '/home'.component: Home },
  { path: '/about'.component: About }
];

// Create a routing instance
const router = new VueRouter({
  routes // Configure routing information
});

// Export routes
export default router;
Copy the code

Note:

  • Import and mount the router in main.js

  • The last step is used in app.vue