Vue路由、页面跳转、页面传参和参数接收示例

Vue路由、页面跳转、页面传参和参数接收示例

• 路由地址设置
• 页面跳转+传参
• 子页面接收父页面参数

---

路由地址设置

index.js页面

路由地址配置文件位于src/router/index.js
例如我们需要设置一个/list-detail的路由，我们只需在当前文件下增加如下配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/first'
import Index from '@/components/index'
import ListDetail from '@/components/list/listDetail'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
      {
          path: '/first',
          name: 'First',
          component: First
      },
      {
          path: '/hello',
          name: 'hello',
          component: HelloWorld
      },
      {
          path: '/list-detail/:id/:title',
          name: 'ListDetail',
          component: ListDetail
      },

  ]
})

当我们添加完以上的配置之后，我们就可以通过访问xx.com/list-detail地址就可以访问到ListDetail这个component（src/components/list/listDetail.vue）的内容了

页面跳转+传参

List.vue页面，下面的示例将实现从一个list列表点击后跳转到列表详情页面

<template>
  <ul>
    <li class="list" @click="jump(1,'列表1详情')">列表1</li>
    <li class="list" @click="jump(2,'列表2详情')">列表2</li>
    <li class="list" @click="jump(3,'列表3详情')">列表3</li>
  </ul>
</template>
<script>
    export default {
        name:'ListView',
        data(){
            return{
                  }
        },
        methods:{
             jump:function(id,title){
             this.$router.push('/list-detail/'+id+'/'+title);
            },
        }
    }
</script>

子页面接收父页面参数

ListDetail.vue页面

<template>
   <div class="header">{{title}}</div>
</template>
<script>
export default {
        name:'listDetail',
        data(){
          return{
             /*以下方法就是接收父页面传参
             获取id:this.$route.params.id
             获取title:this.$route.params.title,
             */
             title:this.$route.params.title,
          }
        },
        methods:{
        //这里面可以根据获取到的id进行获取相应数据

        }
    }
</script>