vue jumps to html with parameters

In Vue applications, we often need to jump between different HTML pages. Sometimes we need to carry parameters for jump to meet business needs. This article will introduce how to jump to HTML pages with parameters in Vue applications.

1. Use Vue Router

Vue Router is the official routing manager of Vue.js, which can easily implement routing jumps for SPA applications. Using Vue Router in a Vue application can easily implement HTML page jumps with parameters.

1. Install Vue Router

Before using Vue Router, you need to install it first. Vue Router can be installed through npm. The specific command is as follows:

npm install vue-router --save

After the installation is completed, introduce Vue Router into the Vue project as follows:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

2. Configure routing

Before using Vue Router for route jump, you need to configure routing first. Configuring routing in Vue Router is very simple. You only need to define the routes array in the Vue instance. Each element represents a routing configuration. For example:

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail
  }
]

const router = new Router({
  routes,
  mode: 'history'
})

export default router

The above code defines two routing configurations. The corresponding path of the first route is "/home" and the component is Home; the corresponding path of the second route is "/detail/:id", where "id" is a dynamic parameter and the component is Detail.

3. Perform route jump

It is very simple to perform route jump in Vue Router. Just use the router-link component to jump, or use the router.push method to navigate programmatically.

• Use router-link to jump

Using the router-link component in the template of the Vue component can easily make routing jumps. For example:

<router-link :to="{name: 'detail', params: {id: 123}}">Show Detail</router-link>

In the above code, the router-link component is used to jump to the route named "detail" and carries the parameter "id" with a value of 123.

• Use the router.push method to jump

Using the router.push method in the Vue component can implement programmatic navigation. For example:

this.$router.push({name: 'detail', params: {id: 123}})

In the above code, the router.push method is used to jump to the route named "detail" and carries the parameter "id" with a value of 123.

2. Use location.href

In addition to using Vue Router for route jumps, you can also use the native location.href for jumps. When implementing route jump through location.href, the URL needs to be manually spliced, and the parameters need to be encoded.

1. Use location.href to jump

Using location.href to jump is very simple. For example, we want to jump to the HTML page named "detail" and carry the parameter "id" with a value of 123, which can be as follows:

location.href = '/detail.html?id=' + encodeURIComponent('123')

In the above code, the encodeURIComponent method is used to encode the parameters Encoded. This is done to avoid parameters containing special characters, causing the redirect URL to be malformed.

2. Getting parameters in the HTML page

After jumping to the HTML page with parameters, we need to get the parameters from the URL for subsequent use. In JavaScript, you can get the parameter part of the URL through location.search. For example, suppose we jump to the HTML page named "detail" and the value of the parameter "id" is 123. You can obtain the parameters through the following code:

function getUrlParam(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  const r = window.location.search.substr(1).match(reg)
  if (r != null) {
    return decodeURIComponent(r[2])
  }
  return null
}

const id = getUrlParam('id')
console.log(id) // 输出123

In the above code, RegExp and match are used Method to get the parameter part of the URL with parameters. Use the decodeURIComponent method to decode parameters to avoid parsing errors caused by special characters contained in parameters.

To sum up, using Vue Router for routing jump is a recommended way. It can better manage routing, jump faster, and is more in line with Vue's MVVM idea. Of course, we can also use the native location.href for routing jumps, but we need to pay attention to the encoding and decoding of parameters. In actual development, it is necessary to choose the appropriate method according to the actual situation.

The above is the detailed content of vue jumps to html with parameters. For more information, please follow other related articles on the PHP Chinese website!