跳转路由的两种方式--声明式导航--编程式导航

<!-- 跳转路由的方式,有两种
        1.声明式导航

        跳转
          router-link 是 vue-router提供的一个全局组件
          router-link 实质上最终会渲染一个a标签,to属性等价于  href属性(to不需要#)
          router-link 提供了声明式导航高亮的功能(自带类名)

        传参
          在router-link 上的to属性传值,方法如下
            (方式1)

            传递参数
              to=/path?参数名 = 值
            例:<router-link to="/about?name=小明"></router-link>

             //获取路由参数:     
             this.$route.query.参数名
            例: this.$route.query.name

            (方式二 ===动态路由)
            to='/path/值' (需要在路由规则里配置: /path/:参数名)
            例: to='/path/小逗一下'
            配置:path:"/about/:username"

            获取参数
            this.$route.params.参数名
            例: this.$route.params.username //值为undefined

          2.编程式导航
              用js代码来进行跳转

              $router 和 route的区别
                $router : 是路由的操作对象(比喻成路由器,装着所有的路由),跳转的时候用
                $route : 是路由的信息对象(比喻成一个路由,存储着当前路由中的所有信息),获取路由参数的时候用
              
              跳转的具体方式:   语法:  path 或者 name   任选一个

              this.$router.push({name:'路由中配置的名字',query:{name:'值'}})

              接收参数:  在对应的页面
              let name_nex = this.$route.query.name;

              3.区别(重点!!!)

              跳转方式的区别:
                1.path 和 name的相同点: 都可以实现页面的切换(路由跳转)
                                        都需要在路由中提前配置好
                                        声明式和编程式导航都可以使用
                              不同点:
                                    path的值是会变的,例如: 动态路由/path/:username
                                    name的值是不会变的,前缀不需要带 / ,只是一个名字(字符串)
                                  **  使用path跳转路由时,path会忽略params(参数为undefined),所以path和params不能一起使用
                                    推荐使用name和query的方式来实现路由跳转
                
                2. query和 params的相同点:  都是路由传参的方式;声明式导航和编程式导航都可以用

                                  不同点:   query相当于GET请求,编写方便.但是页面跳转的时候,参数显示在地址栏,存在安全隐患
                                            params相当于POST请求,需要配置动态路由(具体方式参考上面注释),参数不会显示在地址栏中,相对安全;


    -->
``<!-- 使用name 和 query -->
            <router-link :to="{name:'about',query:{name:'豆本豆'}}">about</router-link>


       <!-- 使用name 和 params -->
      <router-link :to="{name:'about',params:{name:'豆本豆'}}">about</router-link>

this.$router.push({
name:‘search’,//跳转的地址
query:{age:18})