How to use Vuejs to customize routing

This time I will show you how to use Vuejs to define routing, and what are the precautions for using Vuejs to customize routing. The following is a practical case, let's take a look.

We know that components can specify templates through template. For single-file components, templates can be specified through template tags. In addition, Vue also provides us with a way to customize rendering components, that is, rendering Function render, please read the official documentation for specific use of render.

Next we start to implement our front-end routing.

Simple implementation

We first run the vue init webpack vue-router-demo command to initialize our project (note that during initialization, do not choose to use vue-router).

First, create the layout/index.vue file in the src directory to use as the template for the page. The code is as follows:

<template>
  <div class="container">
    <ul>
      <li><a :class="{active: $root.currentRoute === &#39;/&#39;}" href="/">Home</a></li>
      <li><a :class="{active: $root.currentRoute === &#39;/hello&#39;}" href="/hello">HelloWord</a></li>
    </ul>
    <slot></slot>
  </div></template><script>export default {  name: &#39;Layout&#39;,
};</script><style scoped>.container {  max-width: 600px;  margin: 0 auto;  padding: 15px 30px;  background: #f9f7f5;
}a.active {  color: #42b983;
}</style>

Then, move components/HelloWorld.vue to src/pages , and modify its code, using the page template package created above:

<template>
  <layout>
      <!-- 原模板内容 -->
  </layout></template><script>import Layout from &#39;@/layout&#39;;export default {  name: &#39;HelloWorld&#39;,  components: {
    Layout,
  },  // ...};</script><!-- ... -->

Of course, you also need to add a 404 page, which is used to act as an interface when the user enters a route that does not exist.

The last step is our most important step, rewrite main.js and dynamically switch rendering components according to the page URL.

Define route mapping:

// url -> Vue Componentconst routes = {  '/': 'Home',  '/hello': 'HelloWorld',
};

Add the VueComponent computed property and introduce the required components based on window.location.pathname.

const app = new Vue({  el: '#app',
  data() {    return {      // 当前路由
      currentRoute: window.location.pathname,
    };
  },  computed: {
    ViewComponent() {      const currentView = routes[this.currentRoute];      /* eslint-disable */
      return (
        currentView
          ? require('./pages/' + currentView + '.vue')
          : require('./pages/404.vue')
      );
    },
  },
});

To implement rendering logic, the render function provides a parameter createElement, which is a function that generates VNode. You can directly pass parameters to the dynamically introduced component to perform rendering.

const app = new Vue({  // ...
  render(h) {    // 因为组件是以 es module 的方式引入的，
    // 此处必须使用 this.ViewComponent.default 属性作为参数
    return h(this.ViewComponent.default);
  }
});

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS basic improvement learning to operate DOM object style

JS basic improvement learning three built-in Object

#Basic data types of js basic improvement learning

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