Teach you how to change the parameters of the address bar through Vue routing

Vue is a very popular JavaScript framework that provides many features that are convenient for developers. Among them, Vue Router is a submodule of Vue, which is responsible for managing the mapping relationship between views and addresses. Using Vue routing, we can easily correspond to different views to different URL addresses. This article will introduce how to change the parameters of the address bar through Vue routing.

Install Vue Router

First, we need to install Vue Router. In the terminal, enter the following command to install:

npm install vue-router --save

If you are using Yarn package manager, you can install it using the following command:

yarn add vue-router

Create a Vue Router instance

In the application's entry file, we need to create a Vue Router instance. Here is a basic example:

import Vue from 'vue';
import Router from 'vue-router';
import HomePage from '@/components/';
import AboutPage from '@/components/';

(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage,
    },
    {
      path: '/about',
      name: 'about',
      component: AboutPage,
    },
  ],
});

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
});

In the above code, we define two routes: '/' corresponds to HomePage component, and '/about' corresponds to AboutPage component. Both routes have a name through which we can refer to them in the code.

Change the address bar parameters

In Vue Router, we can obtain the information of the current route through the $route object, including the route's path, parameters, names, etc. We can use the $route object to change the parameters of the address bar. Here is an example:

<script>
export default {
  methods: {
    changeParam() {
      this.$({ name: 'about', params: { id: 1 } });
    },
  },
};
</script>

In this example, we define a method called changeParam, in which we use the $ method to change the parameters of the address bar. This method receives an object containing the route name and parameters as parameters. In this example, we set the route name to 'about' and the parameter is {id: 1}. This means we are going to jump to the 'about' route and pass a parameter named 'id' and a value of 1 to that route.

Get the address bar parameters

In addition to changing the parameters of the address bar, we can also get the parameters of the address bar. Here is an example:

<script>
export default {
  computed: {
    id() {
      return this.$;
    },
  },
};
</script>

In this example, we define a computed property called id. In this computed property, we use $ to get the parameter named 'id' in the address bar.

Through these steps, we can easily change the parameters of the address bar and get the parameters in the address bar. In this way, we can achieve more advanced page jumps and data transfers in Vue applications.

This is the article about how to change the parameters of the address bar through Vue routing. For more related contents of Vue changing the address bar, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!