vue routing·configuration

the first method·

Using routing in Vue generally requires the introduction of the Vue Router library. You can use the Vue CLI scaffolding to quickly generate a webpack-packaged Vue project.

When using routing in a Vue project, you usually need to define routing rules first, and then introduce routing into the component to perform operations such as jumps. The following is a simple usage example of Vue Router:

First, you need to install Vue Router in your project via npm:

npm install vue-router 

 Then introduce Vue Router in main.js and create a VueRouter instance. The code is similar to this:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

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

In the above code, we first introduced Vue, Vue Router and two components App.vue, Home.vue and About.vue through import. Then install the Vue Router plug-in through the Vue.use() statement, and then we use the VueRouter instance to define routing rules (routing configuration items). There are two routes / and /about, which correspond to two components: Home and About. , and finally create a Vue instance through the new Vue() statement, and mount the VueRouter instance on the router attribute on the Vue instance.

Next, we need to use routing in the App.vue component. The code is similar to this:

<template>
  <div>
    <h1>My App</h1>
    <router-view></router-view>
  </div>
</template>

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

In the above code, we use the <router-view> tag to render the component corresponding to the current route. In addition, you can also add routing links through the <router-link> tag, such as:

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

In this way, when we click on these links, Vue Router will automatically switch to the corresponding page component for us.

Note that configuring routing in the entry file will introduce too many files into main.js, resulting in reduced readability.

The second type:

Create a router folder in the src directory and define routing rules in it. Then you can mount and use it by following the following steps:

 1. Define routing rules in router/index.js, for example:

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

In this example, we introduced Vue, Vue Router and two components Home.vue and About.vue through import. Then two routes / and /about are defined, which correspond to the two components respectively. Finally, a VueRouter instance is created and the routing rules are exported for use in other files.

2. Introduce router/index.js into main.js. It can be written like this:

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

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

In the introduced code, we first introduced Vue, App.vue and router/index.js, then created a Vue instance through the new Vue() statement, and mounted the Vue Router instance route on the router attribute on the Vue instance.

In this way, after you start the web server, Vue Router will automatically apply the instance, so that the application can use Vue Router for routing.