美文网首页Vue面试
vue 路由的跳转和传参

vue 路由的跳转和传参

作者: 暴躁程序员 | 来源:发表于2022-01-14 09:09 被阅读0次

    1. 必须使用 name 匹配路由,params 传参 (不可使用 path 匹配路由)

    特点:参数保密,刷新页面丢失参数

    1. 在组件中
    this.$router.push({
      name: 'group2',
      params: {
        id: '101'
      }
    })
    

    或者

    <router-link :to="{ name: 'group2', params: { id: 101 }}">首页</router-link>
    
    1. 在目标组件获取参数
    this.paramsId = this.$route.params.id
    

    2. 使用 path或者name 匹配路由,query 传参

    特点:参数在路径上显示,刷新页面不丢失参数

    1. 在组件中
    this.$router.push({
      path: '/group2/page1',
      query: {
        id: '201'
      }
    })
    

    或者

    <router-link :to="{ path: '/group2/page1',query: {id: '201'}}">内容区</router-link>
    
    1. 在目标组件获取参数
    this.queryId = this.$route.query.id
    

    3. 必须使用 path 匹配路由,路径/参数 传参 , 同时配置路由对象 路径/:参数名

    特点:参数在路径上显示,刷新页面不丢失参数

    1. 在组件中
    this.$router.push({
      path: '/group2/page2/青龙',
    })
    

    或者

    <router-link :to="{ path: '/group2/page2/青龙'">内容区</router-link>
    
    1. 在路由文件中,追加 /:name
    {
      path: "/group2/page2/:name",
      name: "group2page2",
      component: () => import("@/views/group2/page2")
    }
    
    1. 在目标组件获取参数
    this.paramsName = this.$route.params.name
    

    4.使用 name 匹配路由, props 传参,适合整合参数

    1. 在组件中
    this.$router.push({
      name: 'group2',
      params: {
        id: '666'
      },
      query: {
        queId: '999'
      }
    })
    

    或者

    <router-link :to="{ name: 'group2', params: { id: '666' },query: {queId: '999'}}">首页</router-link>
    
    1. 在路由文件中 配置props
    $route.params 参数,刷新页面丢失,不在路径上显示
    $route.query 参数,刷新页面不丢失,在路径上显示
    固定参数,刷新页面不丢失,不在路径上显示
    
    {
      path: "/",
      name: "group2",
      component: () => import("@/views/group2/index"),
      props($route) {
        return {
          id: $route.params.id,
          queId: $route.query.queId,
          other: 1000,
        }
      }
    },
    
    1. 在目标组件获取参数,此参数直接通过 this 访问,比如 this.id
    props: ['id','other','queId'],
    

    5. 跳转无回退历史

    this.$router.replace({
        name: "group2page2"
    });
    

    6. 历史回退和前进

    this.$router.go(-1);
    this.$router.go(1);
    

    相关文章

      网友评论

        本文标题:vue 路由的跳转和传参

        本文链接:https://www.haomeiwen.com/subject/jbmwcrtx.html