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

一、路由跳转方式

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>