路由的跳转

路由组件和非路由组件的区别

路由组件文件一般放在view|page文件夹呢；非路由组件一般放在components。
路由组件需要在router文件夹中注册（使用的即为组件的名称），非路由组件在使用的时候，一般都是以标签的形式使用。

路由跳转有两种形式

声明式导航router-link（必须有to属性），可以进行路由的跳转
编程式导航，实际是利用组件实例$router.push|replace方法,进行路由的跳转

说明：声明式导航能做的，编程式导航都能做；但是编程式导航除了可以进行路由跳转还可以做一下其他的业务逻辑.

//声明式导航:仅进行路由的跳转，不需要参数
<router-link to="/user/profile" >
    <el-dropdown-item>{{$t("message.Personal_Center")}}</el-dropdown-item>
  </router-link>
----------------------------------------------------
//编程式导航,比如搜索功能,绑定click事件

路由传参数分类

路由传参分为 params 传参与 query 传参\

params 传参类似于网络请求中的 post 请求，params 传过去的参数不会显示在地址栏中（但是不能刷新）。params 只能配合 name 使用，如果提供了 path，params 会失效。\
query 传参类似于网络请求中的 get 请求，query 传过去的参数会拼接在地址栏中（?name=xx）。query 较为灵活既可以配合 path 使用，也能配合 name 使用（亲测可用）。

路由传参数--三种方法

首先要路由占位

    {
            path:"/search/:keyword",
            component:Search,
            meta:{show:true},
            name:"search"//路由传递参数要用
        },

字符串传递参数（基本不用）

this.$router.push('/search/' + this.keyword +"?k=" + this.keyword.toUpperCase())

2. 模板字符串（基本不用）

this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)

3.对象传递参数(常用) 注意：当利用对象传递参数时，一定要给要跳转的路由起个名字。

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

相关面试题

路由传递参数（对象写法），path是否可以结合params参数一起使用？

//如下，是不可以的
this.$router.push({path:'/search'},params:{keyword:this.keyword},query:{k:this.toUpperCase()}})

不可以，路由跳转传参数的时候，对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数一起使用。例子：

对象写法，如何指定params参数可传可不传？

params参数可以传递也可以不传递，但是如果传递时空串，如何解决？

      this.$router.push({
        name: 'search',
        //传递的参数为空
        params: { keyword:'' },
        query: { k: this.keyword.toUpperCase() },
      })

上面那种写法，会导致url出现问题;可以使用undefinde解决，params不传递参数

      this.$router.push({
        name: 'search',
        //传递的参数为空
        params: { keyword:''||undefined },
        query: { k: this.keyword.toUpperCase() },
      })

4.路由组件能不能传递props数据？可以的，有三种方法。

VUE路由的跳转、传参数分类、传参数的方法(三种)