vue-router传参总结, vue-router中query传参和params传参区别

传参是前端构建项目经常需要用到的操作, 作为一个完整的项目必须经历的一环操作。 掌握不同的传参方法以及他们的优缺点，熟练使用传参的各种api和原理， 可以极大的加快你的开发效率并减少出错的概率， 所以要引起重视。

1、 基本使用

页面跳转时, 使用name和path方式跳转都可以用query来传参， 使用name方式跳转只能用params传参。 也就是说， 只有path + params这种传值方式是无法传递参数的。 编程式导航和声明式导航都遵循这个规则

• 页面路由跳转和传参以及接收参数的各种方式

<template>
  <div class="first-page">
    <!--下面这些方式在html中所作的跳转属于声明式的导航-->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/third">跳到第三页</router-link>
    <router-link :to="{path:'/third', query:{name:'andy凌云'}}">path-query方法跳到第三页</router-link>
    <router-link :to="{name:'thirdPage', query:{nextName:'andy凌云2'}}">name-query方法跳到第三页</router-link>
    <router-link :to="{name:'thirdPage', params:{nextName:'andy凌云222params'}}">name-params方法跳到第三页</router-link>
    
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
      
    <!--在html中直接使用路由传递的数据的方式-->
    {{$route.query.name}}
    {{$route.params.nextName}}
    <el-button @click="jumpThird">跳到第三页</el-button>
  </div>
</template>

<script>
export default {
  name: "first",
  created() {
    // 在跳转的目标页面, 获取传递的参数的方式(query和params), 获取参数都是对象形式
    console.log(this.$route.query, "query");
    console.log(this.$route.params, "params");
  },
  methods: {
    jumpThird() {
      //  下面这些在js中进行的跳转属于编程式导航
      this.$router.push("/third");   // 只能跳转路由中path定义的， 不能是name
      this.$router.push({ path: "/third", query: { name: "andy凌云" } });
      this.$router.push({ name: "thirdPage", query: { age: 18 } });
      this.$router.push({ name: "thirdPage", params: { age: 18 } });
    }
  },
};
</script>

• 在router.js中配置的路由参数

const router = new Router({
    mode: 'history',
    routes: [
        { path: '/', name: 'first', component: () => import('../components/HelloWorld.vue') },
        { path: '/third', name: 'thirdPage', component: () => import('../components/third.vue') },
        { path: '*', redirect: '/' }
    ]
})

2、query和params两种传参方式的差别

1. query在name和path两种传递方式下都是有效的。 params只有name传参是有效的
2. query传参在浏览器地址中显示参数，params不在浏览器中显示参数
3. query传参强制刷新后参数还在。 params强制刷新后参数丢失
4. query是拼接在url后面的参数， 没有也没关系。 params是路由的一部分，必须要有

3、路由相关的其他的一些操作

• 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

• 或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

4. vue-router基本使用模式和导航钩子的用法及作用

// router.ts
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/admin/Home.vue';

Vue.use(Router);

const router =  new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      component: Home,
      beforeEnter: (to, from, next) => {
        next();
      },
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: '',
          name: 'header',
          component: () => import(/* webpackChunkName: "header" */ './views/admin/subpage/Header.vue'),
        },

        {
          path: '/banner',
          name: 'banner',
          component: () => import(/* webpackChunkName: "banner" */ './views/admin/subpage/Banner.vue'),
        },
        {
          path: '/admin',
          name: 'admin',
          component: () => import(/* webpackChunkName: "admin" */ './views/admin/Admin.vue'),
        },
      ],
    },
    {
      path: '/login',
      name: 'login',
      component: () => import(/* webpackChunkName: "login" */ './views/Login.vue'),
      meta:{
        keepAlive:false //不需要被缓存的组件
      }
    },
    {
      path: '*',
      name: '404',
      component: () => import(/* webpackChunkName: "404" */ './views/404.vue'),
    },
  ],
});

// 路由导航钩子的用法
router.beforeEach((to, from, next) => {
  if(from.path.indexOf('/preview') < 0) {
    sessionStorage.setItem('prevToPreviewPath', from.path);
  }
  next();
})

export default router