路由跳转方式与路由参数传递

本文详细介绍了Vue Router的声明式和编程式导航,包括如何通过`router-link`和`$router.push`进行页面跳转。同时,讨论了路由参数的传递方式,如params和query,并给出了三种传递参数的示例。此外,还解答了关于路由参数传递的面试题,包括params和query的使用限制、可选params的处理以及如何通过props向组件传递数据。
摘要由CSDN通过智能技术生成

一、路由跳转方式

1、声明式导航

vue Router中的声明式导航就是 <router-link> 标签,那么router-link怎么带我们去我们要到的组件呢,是通过router-link的to属性到达对应的组件中。

<router-link to="/login">登录</router-link>

2、编程式导航

在Vue里,可以通过vm的$router对象来进行路由的管理

<button   type="button" @click="goSearch">

goSearch() {
      this.$router.push("/search");
    }

二、路由传参方式的三种写法

传递的两种参数

params参数:属于路径中的一部分,需注意,在配置路由时,要先进行占位

query参数:不属于路径中的一部分,不需占位,类似ajax中的querystring,形如/search?k=&kv=

1、字符串的方式 

首先在路径中要进行params参数占位

        {
            path: "/search/:keyword",
            component: Search,
            meta: { show: true },
          
        },

同时传递params参数和query参数

goSearch() {
     // 第一种:字符串的形式
   this.$router.push(
            "/search/" + this.keyword + "?k=" + this.keyword.toUpperCase()
       );
}

2、模板字符串

同时传递params参数和query参数

 goSearch() {
// 第二种:模板字符串
      this.$router.push(
        `/search/${this.keyword}/?k=${this.keyword.toUpperCase()}`
      );
}

3、对象方式

此种方式必须加上name属性才可

        {
            path: "/search/:keyword",
            component: Search,
            meta: { show: true },
            name: "search"
        },

同时传递params参数和query参数

goSearch() { 
this.$router.push({
        name: "search",
        params: { keyword: this.keyword },
        query: { k: this.keyword.toUpperCase() },
      });
}

三、路由传递参数相关面试题

1:路由传递参数(对象写法)path是否可以结合params参数一起使用?

不可以:不能这样书写,程序会崩掉 ,在对象写法中,path和params参数不能一起写,name和params可以

//错误写法
this.$router.push({
        path: "/search",
        params: { keyword: this.keyword },
        query: { k: this.keyword.toUpperCase() },
      });

2:如何指定params参数可传可不传?

路径要求传递params,但是实际并没有传递,如

//路径要求params        
       {
            path: "/search/:keyword",
            component: Search,
            meta: { show: true },
            name: "search"
        },
//实际中并未传递params参数,会造成url问题
this.$router.push({
        name: "search",
        query: { k: this.keyword.toUpperCase() },
      });

会发生url问题,此时需要在 path: "/search/:keyword"后加问号变为 path: "/search/:keyword?"

3:params参数可以传递也可以不传递,但是如果传递是空串,如何解决?

使用undefined解决:参数可以传递,不传递(空串问题)

 params: { keyword: ''|| undefined},

this.$router.push({
        name: "search",
        params: { keyword: ''|| undefined},
        query: { k: this.keyword.toUpperCase() },
      });

4: 路由组件能不能传递props数据?

1)布尔值写法:只能传递params参数

{
            path: "/search/:keyword",
            component: Search,
            meta: { show: true },
            name: "search",
            //布尔值写法:只能传递params参数
            // props: true
}

///在跳转之后接受
props: ["keyword"],

可以观察到props值,

并接收值,通$route.params接收

<h1>params参数{{ $route.params.keyword }}******{{ keyword }}</h1>

 

2)对象写法,额外给路由组件传递一些props值

props: { a: 1, b: 2 }

接收值 

props: [ "a", "b"],


<h2>传递的props属性值a,b****{{ a }},{{ b }}</h2>

3)函数写法,常用,可以传递params参数,query参数,其他参数,传递给路由组件 

props: ($route) => {
                return {
                    keyword: $route.params.keyword,
                    k: $route.query.k,
                    a: 1,
                    b: 1
                }
            }
    props: ["keyword", "a", "b", "k"],    

    <h1>params参数{{ $route.params.keyword }}******{{ keyword }}</h1>
    <h1>query参数{{ $route.query.k }}*************{{ k }}</h1>
    <h2>传递的props属性值a,b****{{ a }},{{ b }}</h2>

             

 

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值