vue-router路由传参的方式 和 router/route区别

前言:

Vue Router (官方:https://router.vuejs.org/zh/)是vue.js的官方路由管理器

它和vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。

router和route区别

router是属于一个全局也可以用的比如我们跳转页面

route是我们局部来进行使用的比如说我们可以接收路由传过来的参数只限于单个页面使用

1. 方式一利用动态路由进行传参

只需要在跳转的时候传参

例:

<div v-for="item in list" :key="item.id" class="list">
    <div class="list-one" @click="$router.push('/xiangqing/'+item.id)">
        
    </div>
</div>

其次在router/index.js文件中写路由

注:props:true必须写否则的化 对应的组件无法引入

{
    path: '/xiangqing/:id',
    component: () => import('../views/xiangqing.vue'),
    props:true
  },

要跳转的页面直接用props来进行接收

<script>
export default {
    props: ['id'],
};
</script>

运行结果:

2. 方式二利用编程式params来进行传参

在跳转传参的时候

注：path换成name来进行跳转

<div v-for="item in list" :key="item.id" class="list">
    <div class="list-one" @click="$router.push({name:'/xiangqing',
     params: { id: item.id }})">
        
    </div>
</div>

路由

{
    path: '/xiangqing',
    name:'/xiangqing',
    component: () => import('../views/xiangqing.vue'),
  },

跳转的页面只需要 this.$route.params来接收

this.$route.params.id

运行效果:

3. 方式三利用query来进行传参

在跳转传参的时候

注：用path来进行跳转

<div v-for="item in list" :key="item.id" class="list">
    <div class="list-one" @click="$router.push({ path: '/xiangqing',
    query: { id: item.id }})">
        
    </div>
</div>

跳转页面直接用this.$route.query.id来进行接收

{{ $route.query.id }}

运行结果: