How to use vue to participate in router-JS Tutorial-php.cn

How to use vue to participate in router

php中世界最好的语言

Release： 2018-05-28 11:05:51

Original

1566 people have browsed it

This time I will show you how to use the vue router to participate in the router, and what are the precautions for using the vue router to participate in the router. The following is a practical case, let's take a look.

vue parameter passing method one

1, routing configuration

 {
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
 }

Copy after login

2, usage method

// 直接调用$router.push 实现携带参数的跳转
 this.$router.push({
// 这个id是一个变量,随便是什么值都可以
 path: /describe/${id}`,
 })

Copy after login

3, Get method (on describe page)

$route.params.id

Copy after login

Use the above method to get the id value passed from the previous page

vue parameter passing method two

1. Routing configuration

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }
（这个地方默认配置就可以了，不用做任何的处理）

Copy after login

2. Usage method

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

Copy after login

In the parent component: determine the matching route through the name in the routing attribute, and pass params to pass parameters.

3. Obtaining method (on the describe page)

$route.params.id

Copy after login

You can also use params to obtain it;

vue parameter passing method three

1. Routing configuration

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }

Copy after login

(default configuration)

2. Usage method

 this.$router.push({
   path: '/describe',
   query: {
   id: id
   }
  })
（params换成了query）

Copy after login

3. Obtaining method (on the describe page)

$route.query.id

Copy after login

(This place uses query to also obtain the id. The difference from the previous params acquisition is that the id value obtained with query will be displayed in the url, and you can see the value you passed)

props value transfer method

Parent component

(table-data can be named randomly, not a specific value)

<p class="content">
//这个是一个普通组件，其中tabelData可以是变量，也可以是常量，和pageInfo一样样，这里打算传递两个值过去，其实也可以用对象的方式传过去都是可以的。
 <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
</p>

Copy after login

Subcomponent

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

Copy after login

Prop is one-way binding and props should not be changed inside the subcomponent. However, the value passed by the props here will change as the value of the parent component changes, which is a dynamic change.

Tips for using $route

1, $route.path

Type: string

String, corresponding to the path of the current route, is always resolved to an absolute path, such as "/foo/bar".

2, $route.params

Type: Object

A key/value object, including dynamic fragments and full matching fragments, if there are no

route parameters is an empty object.

3, $route.query

Type: Object

A key/value object representing URL query parameters. For example, for the path /foo?user=1, $route.query.user == 1, or an empty object if there are no query parameters.

4, $route.hash

Type: string

The hash value of the current route (with #), if there is no hash value, it is an empty string.

5, $route.fullPath

Type: string

The URL after completion of parsing, including the full path of query parameters and hash.

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!