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 and is responsible for managing the mapping relationship between views and addresses. Using Vue routing, we can easily map different views to different URL addresses. This article will introduce how to change the parameters of the address bar through Vue routing.

1. 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 the Yarn package manager, you can use the following command to install:

yarn add vue-router

2. Create a Vue Router instance

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

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

Vue.use(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 the HomePage component, and '/about' corresponds to the AboutPage component. Both routes have a name by which we can reference them in our code.

3. Change the address bar parameters

In Vue Router, we can obtain the current routing information through the $route object, including the routing path, parameters, name, etc. We can use the $route object to change the parameters of the address bar. The following is an example:

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

In this example, we define a method named changeParam, in which we use the $router.push 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 to {id: 1}. This means we are going to jump to the 'about' route and pass it a parameter called 'id' with a value of 1.

4. Get 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.$route.params.id;
    },
  },
};
</script>

In this example, we define a computed property called id. In this computed property, we use $route.params.id 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 implement more advanced page jumps and data transfer in Vue applications.

The above is the detailed content of How to change the parameters of the address bar through Vue routing. For more information, please follow other related articles on the PHP Chinese website!