What are the basic configuration commands of Vue's Router?

Vue's Router is a plug-in for page jump and routing management. It can help us load different components according to different URL requests and implement front-end routing functions. When using Vue's Router, you need to perform basic configuration on it. The following will introduce the basic configuration commands of Vue's Router in detail, and attach specific code examples.

1. Install Vue Router
   Use npm to install Vue Router, open the terminal and execute the following command in the project directory:

   npm install vue-router

2. Import Vue Router
   Import Vue Router in the main.js file and use the Vue.use method to register it as a plug-in for Vue:

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)

3. Create a routing instance
   In main. Create a routing instance in the js file and configure the routing rules:

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import Home from './components/Home.vue'
   import About from './components/About.vue'
   
   Vue.use(VueRouter)
   
   const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About }
   ]
   
   const router = new VueRouter({
     mode: 'history', // 使用HTML5的history模式，去除URL中的"#"
     routes
   })

4. Mount the routing instance
   Mount the routing instance to the Vue instance in the main.js file:

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

5. Configure routing exit
   In the root component of Vue, use the tag to display the components corresponding to the route:

   <template>
     <div>
    <router-view></router-view>
     </div>
   </template>

Through the above configuration, we have completed the basic configuration of Vue's Router. Here is a complete example:

First, create two components, Home.vue and About.vue, in the src/components directory.

The content of Home.vue is as follows:

<template>
  <div>
    <h2 id="Welcome-to-Home-Page">Welcome to Home Page</h2>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

The content of About.vue is as follows:

<template>
  <div>
    <h2 id="Welcome-to-About-Page">Welcome to About Page</h2>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

Then, create the index.js file in the src/router directory with the following content:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

Finally, make the following configuration in the src/main.js file:

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

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

The above are the basic configuration commands and code examples of Vue Router. Through these configurations, we can implement jumps between pages and front-end routing functions. I hope this article can help you understand and use Vue Router.

The above is the detailed content of What are the basic configuration commands of Vue's Router?. For more information, please follow other related articles on the PHP Chinese website!