Installation and configuration method of vue-route routing management

introduce

Vue Router is the official routing manager for Vue.js It is deeply integrated with the core of Vue.js , making it easy to build single-page applications. Features included are:

• Nested routes/view tables
• Modular, component-based routing configuration
• Route parameters, queries, wildcards
• View transition effects based on Vue.js transition system
• Fine-grained navigation control
• Links with auto-activated CSS classes
• HTML5 history mode or hash mode, automatically downgraded in IE9
• Custom scroll bar behavior

Install

Installation Commands

npm install vue-router --save

If you use it in a modular project, you must explicitly install the routing function via Vue.use() :

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

Vue.use(VueRouter)

Modular use

When we used the scaffolding vue-cli to create a project before, router was actually configured. After the project was created, there would be a router folder in the project root directory, and there would be an index.js file under router , with the following content:

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

// 1. When we use other plug-ins, we must use Vue.use to install the plug-in Vue.use(VueRouter);

// 2. Define routes, each route should map to a component const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
];

// 3. Create a router instance const router = new VueRouter({
  //Configure the application relationship between routes and components routes, // (abbreviation) equivalent to routes: routes
});

// 4. Export the router object, and then reference export default router in main.js;

This file is specifically for configuring routing. Finally, after exporting router object, we can reference it in main.js of the project.

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  router, // Add the router object to the vue instance, and you can use routing render: (h) => h(App),
}).$mount("#app");

Our two component codes About and Home are as follows:

// About.vue
<template>
  <div class="about">
    <h1>About</h1>
  </div>
</template>

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

<style scoped>
</style>

// Home.vue
<template>
  <div class="home">
    <h1>Home</h1>
  </div>
</template>

<script>

export default {
  name: "Home",
};
</script>

<style scoped>
</style>

Finally, we write the following code in App.vue :

template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<style lang="scss">
</style>

Use <router-link> to load the link, and then use to represent the link to jump to. Finally, <router-link> will be rendered into an <a> tag.
<router-view> is the outlet of the route, that is, the code under the corresponding url will be rendered to this place.

HTML5 history mode

But when we start the program and access the page, # will appear on url address

This is because vue-router defaults to hash mode - using URL 's hash to simulate a full URL , so the page will not reload when URL changes.
If we don't want the ugly hash , we can use the history mode of the router, which makes full use of history.pushState API to complete URL jump without reloading the page.

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

We just need to add mode to history in index.js under router folder, and then revisit http://localhost:8080/ without the # sign.

Note: history mode also requires background configuration support. Because our application is a single-page client application, if the backend is not configured correctly, when the user directly accesses other url addresses in the browser, 404 will be returned, which is not good.

Therefore, you need to add a candidate resource on the server to cover all situations: if URL does not match any static resource, it should return the same index.html page, which is the page your app depends on.

This is the end of this article about the installation and configuration of vue-route routing management. For more relevant vue route installation and configuration content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!