动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

const User = {  template: '<div>User</div>'}const router = new VueRouter({  routes: [    // 动态路径参数 以冒号开头   { path: '/user/:id', component: User }  ]})

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

const User = {  template: '<div>User {{ $route.params.id }}</div>'}

你可以看看这个在线例子<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"。

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

模式	匹配路径	$route.params
/user/:username	/user/evan	`{ username: 'evan' }`
/user/:username/post/:post_id	/user/evan/post/123	`{ username: 'evan', post_id: '123' }`

除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query (如果 URL 中有查询参数)、$route.hash 等等。你可以查看 API 文档的详细说明。

基本用法是在router link中我们使用params传递一个叫id的对象属性名，在对id的对象绑定时我们使用的时我们循环出来的列表项。

 <router-link :to="{name:'listedit', params: {id: item.id,op:item}}">
                           <a class="list-change">编辑</a>
                           </router-link>

而在我们的路由表配置时需要我们将这个item.id传递过去，params就是起到了这样的功能。通过：id的方式对他进行解析而我们在当下页面也可以用到这个op中的参数

 {
    path:'/listedit/:id',
    name:'listedit',
    component:Listedit
  }

而后只需要我们在相应的页面创建时调用就可以了

<template>
    <div >
        <div class="dd">{{data.id}}</div>
    </div>
</template>

<script>
export default {
    
    data(){
        return{
            data:null
        }
    },
    mounted(){
        this.data=this.$route.params.op
        console.log(data)
    }
    
}