How to configure header when vue jumps

Vue is a popular JavaScript framework for building single-page applications (SPA). In Vue, application navigation and page jumps are controlled through routing. When users jump to pages through Vue routing, how to configure the header? This article will introduce in detail how to configure the header when Vue routes jump.

What is Vue Router?

Vue Router is Vue’s official routing management library. It can match routes based on URLs and then display the corresponding components. Vue Router can help us switch between pages and pass parameters. It can also implement some advanced functions, such as route guards, lazy loading of routes, etc.

Vue Router usage steps

Step 1: Create a Vue project

If you are already using Vue.js to build the project, you can skip this step. If you are new, please install Vue.js first. For specific installation methods, please refer to the official website https://cn.vuejs.org/.

Step 2: Install Vue Router

We can install Vue Router through the npm package manager, enter the following command:

$ npm install vue-router -save

Step 3: Create a Vue Router instance

Using Vue Router in Vue.js is very simple. You only need to create a Vue Router instance, which will be responsible for managing all our routes. Introduce Vue Router in the main.js file and create a Vue Router instance as follows:

import Vue from 'vue'; // 导入Vue
import VueRouter from 'vue-router'; // 导入Vue Router
import App from './App.vue'; // 导入根组件
import routes from './routes'; // 导入路由配置

Vue.use(VueRouter); // 安装Vue Router

const router = new VueRouter({
  routes // 配置路由规则
});

new Vue({
  el: '#app',
  router, // 注入路由实例
  render: h => h(App) // 渲染根组件
});

In the above code, we first import Vue, Vue Router, App components and routing configuration files.

Then, we install Vue Router through Vue.use(VueRouter). Next, we create a Vue Router instance via new VueRouter() and pass the routing configuration to the instance.

Finally, we inject the routing instance into the router option in the root component. This way, we can use the Vue Router instance throughout our application.

Step 4: Define routing rules

It is very simple to define routing rules in Vue Router. We only need to define an array in the routing configuration file. Each element in the array represents a routing rule. , as shown below:

import Home from './views/Home.vue';
import About from './views/About.vue';
import Contact from './views/Contact.vue';
import NotFound from './views/NotFound.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/contact',
    name: 'contact',
    component: Contact
  },
  {
    path: '*',
    name: 'not-found',
    component: NotFound
  }
];

export default routes;

In the above code, we define four routing rules: '/', '/about', '/contact', ''. Among them, '/' represents the home page, and '' represents the 404 page.

Step 5: Use routing components

In Vue Router, each routing rule can correspond to a component. When we define routing rules, we have specified the components corresponding to each routing rule. Now, we need to use the routing component in the App.vue component to display different pages.

In App.vue, we use the tag to display the components corresponding to the current routing rules, as shown below:

<template>
  <div id="app">
    <header>
      <!-- 配置header -->
    </header>
    <router-view></router-view>
  </div>
</template>

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

In the above code, we use < The Vue component is used in the ;router-view> tag, and Vue will dynamically display different routing components through routing rules. You can also add some static HTML code and CSS styles here to build the header.

Step 6: Configure header

Vue Router provides a global hook beforeEach(), which is executed before the route jumps. We can dynamically modify the header content in this hook.

Add the following code to the main.js file:

router.beforeEach((to, from, next) => {
  const title = to.meta.title;

  if (title) {
    document.title = title;
  }

  next();
});

In the above code, we determine whether the meta attribute is defined in the current routing rule. If it is defined, add the meta attribute to The title value is assigned to the header.

Summary

This article details how to configure the header when Vue Router jumps. We can use the tag provided by Vue Router to dynamically display routing components, and at the same time, dynamically modify the header content in the global hook beforeEach() to achieve a better user experience. I hope this article can help you configure headers when using Vue Router.

The above is the detailed content of How to configure header when vue jumps. For more information, please follow other related articles on the PHP Chinese website!