发表于: 2020-02-23 21:24:35

1 1884


今天完成的事情

在编辑和新增的按钮中需要使用到后边加循环出来的id,所以需要使用到的内容时是路由中的动态路由。

动态路由匹配

我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 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)
    }
    
}

明天要完成的事情

完成编辑和新增的内容




返回列表 返回列表
评论

    分享到