vuex全家桶系列05-路由组件传值

1.路由组件传值

在组件中使⽤ $route.params 或者 $route.query 会使之与其对应路由形成⾼度耦合，从⽽使组件只能在某些特定的 URL 上使⽤，限制了其灵活性。

🍊使⽤ props 将组件和路由解耦：

• 路由信息对象中添加 props 属性:
  • 🌟布尔值：true 就是可以接收参数了
  • 🌟回调函数：(route)=>({id:route.params.id,love:route.query.love})

//🍊src/router/index.js

import Vue from "vue";
//1、导入 vuerouter
import VueRouter from "vue-router";
//2、模块化机制，使用vuerouter
Vue.use(VueRouter);
import Home from "@/views/Home";
import About from "@/views/About";
import User from "@/views/User";
//3、创建路由器对象，并在VueRouter中配置路由信息对象
export default new VueRouter({
  mode:"history",
  routes:[
    {
      path:"/user/:id",
      name:"user",//动态路由匹配
      component:User,
      //🤪porps可以是个回调函数
      props:(route)=>({
        id:route.params.id,
        love:route.query.love
      }),
      //😆props可以是个布尔值
      //props: true
    },
  ]
})

• 通过在组件中的 props 属性拿到对应的路由传递的值,如下 User.vue
• http://localhost:8080/user/2?love=linlin 页面会渲染出 2 和 linlin

<template>
<div>
    <h1>我是用户路由组件{{$route.params.id}}--{{id}}</h1>
    <h2>{{love}}</h2>
</div>
</template>

<script>
export default {
    created() {
        console.log('我是路由信$route', this.$route);
    },
    //这里就可以接收到路由的id参数了
   // 🍊http://localhost:8080/user/2?love=linlin
    props: ["id", "love"],
  
    watch: {
        // 🍊使⽤watch(监测变化) $route对象

        // $route(to, from) {
        //     console.log('我是from', from.params.id);
        //     console.log('我是to', to.params.id);
        //    🍊这里可以送ajax请求你，请求后端数据了，然后渲染页面
        // },
    },
    //🍊路由守卫
    beforeRouteUpdate(from, to, next) {
        console.log('beformRouterUpdate的from', from);
        console.log('beformRouterUpdate的 to', to);
        //这里一定要调用next(),不然会阻塞路由的
        next();
    },
};
</script>

<style scoped>
</style>