Detailed explanation of dynamic routing examples in Vue.js

The route navigation function implemented in the article Using vue-router to complete simple navigation functions cannot pass parameters, which means it is a static route. Since the routing mode that can pass parameters can pass parameters, the number of corresponding routes is uncertain, so it is called dynamic routing.

So how to use parameters as routes?

Add : in front of the parameter name, and then write the parameters in the path of the route

The following example:

  routes: [    //将页面组件与path指令的路由关联
    { name: 'BookInfo', path: '/books/:id', component: BookInfo }
  ]

After this definition, vue-router will match all: /books/1,/books/2,/books/3..., so It is said that the number of routes defined in this way is undefined.

In<router-link> we add a params attribute to specify the specific parameter value

        <li>
          <router-link :to ="{name:&#39;BookInfo&#39;,params :{id:1}}" >
            <p>首页</p>
          </router-link>
        </li>

The above link corresponds to: http://localhost:8080/__dirname/books/1

If you need to pass in multiple parameter values, just follow the naming method above to add parameters and pass the corresponding declared parameter values ​​in params That’s it. As long as vue-router matches the definition of the routing mode, it will automatically decompose the parameters and take values
For example, path: '/books/version/:id', then the corresponding params is: params :{id:1,version:1}

---

So now we are faced with this problem - how to read this parameter value from the routing?
Answer: Get the specified parameter value through the $route.params attribute, such as: this.$route.params.id,this.$route.params .msg

If you want to output the parameter value in the corresponding component page, the corresponding code is as follows:

<p>当前图书编号是：{{$route.params.id}}</p>

If you want to do it based on the parameter value in the js code For corresponding processing, add the following code to the default route:

export default {  name: "app",  created() {    alert(this.$route.params.id);  }};

When using routing parameters, such as from /books/1 to /books/2 , the original component instance will be reused, because both routes render the same component, and the reuse rate will be higher than destroying and recreating it.
This means that the component's life cycle hook will no longer be called (the component is not destroyed and then created), that is, created mounted and other hook functions are loaded when the page is loaded for the second time. Return to invalid.

Then, when reusing components, if you want to respond to changes in routing parameters, you need to add $ to the $watch object. route Tracking function for object changes

<script>
export default {  name: "app",
  watch :{
    &#39;$route&#39; (to,from){
      alert(to.params.id);
    }
  }
};
</script>

---

$route.params The defined parameters must be part of the entire route, vue -router also allows us to pass parameters using "/path?param = value", and we can use $route.query.parameter name to get the parameter value
vue-router also provides a constant parameter definition meta. We can first define the value of meta in the routing definition, and then pass ## in the routing instance. #$route.meta Parameters get specific constant values.

The following code (

$route.query.Parameter name)

{ name: 'BookInfo', path: '/books/:id/?bookName=Lost', component: BookInfo }

The code to obtain the value of

bookName is this.$route.query.msg

The following code (

$route.meta.Parameter name)

{ name: 'BookInfo', path: '/books/:id', component: BookInfo ,meta: { bookName : 'Lost In River' }}

Get the

bookName The value code is this.$route.meta.bookName

The route navigation function implemented in the article using vue-router to complete the simple navigation function cannot pass parameters, that is to say It is a static route.

The routing mode that can pass parameters, because parameters can be passed, the number of corresponding routes is uncertain, so it is called

dynamic routing

So what? What about using parameters as routes?

Add

: in front of the parameter name, and then write the parameters in the path of the route

The following example:

  routes: [    //将页面组件与path指令的路由关联
    { name: 'BookInfo', path: '/books/:id', component: BookInfo }
  ]

After this definition,

vue-router will match all: /books/1,/books/2,/books/3..., so It is said that the number of routes defined in this way is undefined.

In

<router-link> we add a params attribute to specify the specific parameter value

        <li>
          <router-link :to ="{name:&#39;BookInfo&#39;,params :{id:1}}" >
            <p>首页</p>
          </router-link>
        </li>

The above link corresponds to: http://localhost:8080/__dirname/books/1

If you need to pass in multiple parameter values, just follow the naming method above to add parameters and pass the corresponding declared parameter values ​​in params That’s it. As long as vue-router matches the definition of the routing mode, it will automatically decompose the parameters and take values

For example,
path: '/books/version/:id', then the corresponding params is: params :{id:1,version:1}

---

So now we are faced with this problem - how to read this parameter value from the routing?

Answer: Get the specified parameter value through the
$route.params attribute, such as: this.$route.params.id,this.$route.params .msg

If you want to output parameter values ​​in the corresponding component page, the corresponding code is as follows:

<p>当前图书编号是：{{$route.params.id}}</p>

如果想在js代码中根据参数值做相应的处理，则在默认路由中加入如下代码：

export default {  name: "app",  created() {    alert(this.$route.params.id);  }};

当使用路由参数的时候，如 从/books/1 到 /books/2 ，原来的组件实例会被复用，因为两个路由都渲染同一个组件，比起销毁后再创建，复用的销率会更高。
这也就是说 组件的生命周期钩子不会再被调用(组件没有被销毁后再创建) ，即 created mounted 等钩子函数在页面第二次加载的时候回失效。

那么，当复用组件时候，想对路由参数的变化做出响应的话，就需要在 $watch 对象内添加对 $route 对象变化的跟踪函数

<script>
export default {  name: "app",
  watch :{
    &#39;$route&#39; (to,from){
      alert(to.params.id);
    }
  }
};
</script>

---

$route.params 定义的参数必然是整个路由的其中一部分，vue-router 还可以让我们使用 "/path?param = value" 的方式传递参数，可以使用$route.query.参数名 获取参数值
vue-router 还提供一种常量参数定义 meta，我们可以在路由定义中先定义 meta 的值，然后在路由实例中通过$route.meta 参数获取具体常量值。

如下代码（$route.query.参数名）

{ name: 'BookInfo', path: '/books/:id/?bookName=Lost', component: BookInfo }

获取其中 bookName 的值的代码为 this.$route.query.msg

如下代码（$route.meta.参数名）

{ name: 'BookInfo', path: '/books/:id', component: BookInfo ,meta: { bookName : 'Lost In River' }}

获取其中 bookName 的值的代码为 this.$route.meta.bookName

相关推荐：

vue router动态路由和嵌套路由实例详解

The above is the detailed content of Detailed explanation of dynamic routing examples in Vue.js. For more information, please follow other related articles on the PHP Chinese website!