vue 路由传参

(2)路由传参

 ①query传参

this.$router.push({name:'home',query: {id:'1'}})

this.$router.push({path:'/home',query: {id:'1'}})

// html 取参  $route.query.id

// script 取参  this.$route.query.id

 ②params传参

this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name

// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,

// 不配置path ,第一次可请求,刷新页面id会消失

// 配置path,刷新页面id会保留

// html 取参  $route.params.id

// script 取参  this.$route.params.id

 ③query和params区别

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params，刷新页面id还在

  params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

3.router-link和router.push实现跳转的原理

router-link

默认会渲染为 a 标签. 可以通过 tag 属性修改为其他标签 自动为 a 标签添加 click 事件. 然后执行 $router.push() 实现跳转

$router.push 根据路由配置的 mode 确定使用 HTML5History 还是 HashHistory 实现跳转  

HTML5History : 调用   window.history.pushState() 跳转

HashHistory : 调用  HashHistory.push() 跳转

那么二者到底有什么区别呢？

mode:'hash' ，   多了 “ # ”

http://localhost:8080/#/hello

mode:'history'

http://localhost:8080/hello

router index.js

{
    // 参数 用 : 代表,  ?代表可选
    path: '/product/:type?',
    props: true,
    name: 'Product',
    component: () => import('../views/Product.vue'),
  },

              <router-link

                :class="{                         顶部导航 当前路由高亮
                  'router-link-exact-active': $route.name == 'Product',
                }"
                to="/product"
                >产品中心<span class="icon_pd"></span
              ></router-link>
              <div class="pd_dropdown">
                <router-link to="/product/1">净美仕净化器</router-link>
                <router-link to="/product/2">净美仕滤网</router-link>
              </div>

    <div class="main container">
      <div class="pl_header">
下边路由高亮
        <router-link to="/product/1" :class="{ cur: type == 1 }"
          >净美仕净化器</router-link
        >
        <router-link to="/product/2" :class="{ cur: type == 2 }"
          >净美仕滤网</router-link
        >
      </div>

export default {
  computed: {
    ...mapState(["imgURL"]),
  },
  // 属性的复杂写法: 可以声明默认值, 应对可选传参
  // props: ['type'], //简化写法
  props: {
    // 属性名:{详细的配置}
    type: {
      // 通过路径传递的参数, 都是字符串类型
      type: String, //类型: String是数字类型
      default: "1", //默认值: '1',  如果没传, 则默认是1
    },
  },
  mounted() {
    this.getData();
  },
  data() {
    return {
      data: null,
    };
  },
  methods: {
    getData(page = 1) {
      // type: 可选传递, 没有传递则为 undefined, 默认值为1
      // 因为 在props中, 指定了默认值, 所以此处不需要再判断
      // const type = this.type ?? 1 // ?? 左侧值是false 则用右侧值
      const url = `product_select.php?pageNum=${page}&type=${this.type}`;

      this.axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
  },
  // 监听到路由变化时, 重新发请求
  watch: {
    $route(newValue, oldValue) {
      this.getData();
    },
  },
};