简单说说如何使用vue(2)

路由 path 可以带参数。比如文章 URL,路由的前半部分是固定的,后半部分是动态参数,形如:/article/xxx。它们会被路由到同一个页面,在该页面可以获取 xxx 参数,然后根据这个参数来请求数据。

首先在 main.js 中配置带参数的路由规则:

const Routers = [{ ... { path: '/article/:id', component: (resolve) => require(['./router/views/article.vue'], resolve) } ... ]

然后在 router/views 下新建一个 article.vue :

<template> <div>{{$route.params.id}}</div> </template> <script> export default { name: "article", mounted() { console.log(this.$route.params.id); } } </script> <style scoped> </style>

运行 npm run dev 后,在浏览器地址栏中输入 :8080/article/123,就能访问到 article.vue 组件咯:

简单说说如何使用vue

注意: 因为配置的参数路由规则是 /article/:id,即必须带 id 参数,否则是会重定向会 /index 的哦O(∩_∩)O~

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/56b4d5d5a435bed40a1e3ea9bff84dec.html