How to write vue static routing

Vue is a popular JavaScript framework that provides a flexible framework for building interactive, dynamic and scalable web applications. Vue Router is the official route management plugin for Vue.js, which allows you to map components to routes, enabling single-page application (SPA) development.

Vue Router supports two routing modes: historical mode and hash mode. Static routing is a type of routing, which is a supplement to dynamic routing in Vue Router. Static routing allows you to map a URL path to a specific component, it does not contain dynamic parameters.

So, how to define static routing in a Vue application?

1. Create routing files

First, you need to create a router directory in your Vue project. In this directory, create a router.js file to store your routing configuration.

2. Import Vue and Vue Router

At the beginning of the file, you need to import Vue and Vue Router. Here is a sample code that imports Vue and Vue Router:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

3. Create a route list

Next, you need to create a router instance that contains all the static routes. A regular route list should look like this:

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/contact',
    component: Contact
  }
]

In this code, we define three static routes: /home, /about, and /contact. Each route points to a different component, which needs to be imported when defined.

4. Create a Vue Router instance

Once you have created your route list, you need to instantiate it through Vue Router. This is done with the following code:

const router = new VueRouter({
  routes
});

In this code, we specify our route list routes as a parameter and the routing configuration of the VueRouter instance is created.

5. Inject the route instance into the Vue root instance

Now we need to ensure that our Vue application is associated with the Vue Router. In your main.js file, register the route instance on the Vue root instance as follows:

import Vue from 'vue'
import App from './App.vue'
import router from './router.js';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Now your route has been successfully integrated into your Vue application. Try accessing any static route in your application and you should see the route page's components loaded correctly.

Summary

This article introduces you how to define static routes in Vue applications. Defining static routes in Vue allows you to easily map URL paths to specific components, which is a complement to the Vue Router route management plugin. If you want to know more about Vue Router, please refer to the official documentation.

The above is the detailed content of How to write vue static routing. For more information, please follow other related articles on the PHP Chinese website!