When we develop a single page application, we sometimes need to enter a route to obtain data from the server based on parameters, so we first need to obtain the parameters passed by the route, so as to complete the server request. Therefore, we need to understand several ways of routing parameter transmission, the following way is the same as vue-router@4.

Programmatic routes pass parameters

Instead of using

to create an A tag to define navigation links, we can use the router instance method to write code to do so.

1. Byparamspass

The routing configuration

Path parameters are represented by a colon:.

Const routes = [// Dynamic segment starts with a colon {path: 'details/:id', name: "details", Component: details},]Copy the code

The router.push() method can take a string path or an object that describes the address.

const Home = { template: '<div @click="toDetails">To Details</div>', metheds: {toDetails() {// String path this.$router.push('/details/001') // Object with path this.$router.push({path: $router. Push ({name: 'details', params: {id: '001'})}}}Copy the code

Note that params is ignored if path is provided:

Router.push ({path: '/details', params: {id: '001'}}) // -> /detailsCopy the code

Component data acquisition

When a route is matched, its params value is exposed in each component as this.$route.params.

const Details = { template: $Details {{$route.params.id}} </div>', created() {$watch() => this.$route.params, (toParams,) PreviousParams) => {// Respond to routing changes... }})},Copy the code

2. Byquerypass

In this case the parameters passed by query are displayed after the URL, for example: /details/001? Kind = the car.

The routing configuration

When using Query, all three approaches are possible:

this.$router.push('/details/001? kind=car')Copy the code
this.$router.push({ path: '/details/001', query: { kind: "car" }})
Copy the code
this.$router.push({ name: 'details', params: { id: '001' }, query: { kind: 'car' }})
Copy the code

Component data acquisition

$route.query $route.query

const Details = { template: '<div>Details {{$route.query.kind}} </div>', created() {// Listen for route changes this.$watch(() => this.$route.query, (toParams, PreviousParams) => {// Respond to routing changes... }})},Copy the code

To respond to changes in parameters within the same component, you can simply use any property on the Watch $route object, in this case, $route.query.

Through 3.hashpass

This way, the URL path has a hash, for example: /details/001#car.

The routing configuration

When using hash, all three of the following ways are possible (same as query) :

this.$router.push('/details/001#car')
Copy the code
this.$router.push({ path: '/details/001', hash: '#car'})
Copy the code
this.$router.push({ name: 'details', params: { id: '001' }, hash: 'car'})
Copy the code

Component data acquisition

$route.hash. Slice (1)

const Details = {
  template: '<div>Details {{ $route.hash.slice(1) }} </div>',
}
Copy the code

Pass through props

Using $route in a component is tightly coupled to the route, which limits the flexibility of the component because it can only be used for specific urls. While this is not necessarily a bad thing, we can undo this behavior with the props configuration.

Parameter passing is performed using props in a decoupled manner, primarily in routing configuration.

1. Boolean mode

When the props is set to true, route.params is set to the props of the component.

For example, the following code gets the dynamic field ID from $route:

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const routes = [{ path: '/user/:id', component: User }]
Copy the code

Replace the above code with props as follows:

Const User = {props: ['id'], // get id template from props: <div>User {{id}}</div>' // route configuration, add props and set value to true const routes = [{path: '/ User /:id', Component: User, props: true }]Copy the code

Note: For routes with named views, you must define each named viewpropsConfiguration:

Const routes = [{path: '/user/:id', components: {default: user, sidebar: sidebar}, // { default: true, sidebar: false } } ]Copy the code

2. Object mode

When props is an object, it sets as-is to component props. This is useful when props are static.

The routing configuration

const routes = [
  {
    path: '/hello',
    component: Hello,
    props: { name: 'World' }
  }
]
Copy the code

Component to get data

const Hello = {
  props: {
    name: {
      type: String,
      default: 'Vue'
    }
  },
  template: '<div> Hello {{ name }}</div>'
}
Copy the code

The
component displays Hello Vue by default, but the route is configured with props objects. When the route jumps to/Hello, the name passed through is displayed and the page displays Hello World.

3. Functional mode

You can create a function that returns props. This allows you to convert parameters to other types, combine static values with route-based values, and so on.

The routing configuration

In function mode, the function that returns props takes a route as a route record.

// Create a function that returns props const dynamicPropsFn = (route) => {return {name: route.query.say + "!" } } const routes = [ { path: '/hello', component: Hello, props: dynamicPropsFn } ]Copy the code

Component data acquisition

When the URL/hello? When say=World, {name: ‘World! ‘} is passed to the Hello component as props.

const Hello = {
  props: {
    name: {
      type: String,
      default: 'Vue'
    }
  },
  template: '<div> Hello {{ name }}</div>'
}
Copy the code

The page will render:

Note: Keep the props function stateless as much as possible, because it only takes effect when routing changes. If you need state to define props, use wrapper components so that vUE can react to state changes.

The other way

1. Transmission through Vuex

1. Store Storage status. 2. Component A changes the state in store. 3. Component B is obtained from store.Copy the code

2. Use front-end local storage

1. Local Storage; 2. Session Storage; 3. IndexedDB; 4. Web SQL; 5. The Cookies.Copy the code