router route $router $route 这四者的区别

router：路由对象，管理路由，负责路由跳转

route：路由规则数组  路径和组件一一对应的关系

$router:在vue中$router其实就是router   (Vue.prototype.$router=router) ：路由对象，管理路由，负责路由跳转

$route：路由信息对象，负责存储路由信息：路径和参数等等

this.$router是VueRouter的实例方法，当导航到不同url，可以使用this.$router.push方法，这个方法则会向history里面添加一条记录，当点击浏览器回退按钮或者this.$router.back()就会回退之前的url。
this.$route相当于当前激活的路由对象，包含当前url解析得到的数据，可以从对象里获取一些数据，如name,path等。

声明式导航要借助a标签的href属性进行跳转

声明式导航有两种跳转方式query传参和params传参

 

查询参数两个流程

1.传递参数: <router-link to="/friend?参数名=参数值">朋友</router-link>

        例如 ： <router-link to="/friend?name=张三&age=20">朋友</router-link>

2.跳转后的组件接收参数: this.$route.query.参数名

        例如 ：

<li>这是当前页面 query 接收到的参数: 
    <span>姓名：{{ $route.query.name }}</span>  --
    <span>年龄：{{ $route.query.age }}</span>  
</li>

路径参数三个流程

1.定义路由规则: path: '/friend/:参数名'

 2.传递参数: <router-link to="/friend/参数值">朋友</router-link>

        <router-link to="/friend/李四/30">朋友</router-link>

3.跳转后的组件接收参数: this.$route.params.参数名

        <li>这是当前页面 params 接收到的参数: 
            <span>姓名：{{ $route.params.name }}</span> -- 
            <span>年龄：{{ $route.params.age }}</span>  
        </li>

vue路由的编程式导航

 

1.编程式导航作用 ： 使用js代码是做路由跳转 (替代router-link)

2.语法 ：

$router.push('/路径')

`$router.push({name:'组件name'})`

3.应用场景：如果希望满足条件才跳转，就可以使用编程式导航

router-link ：相当于a标签，只要点击就会跳转,没有逻辑

$router.push('路径'):相当于window.location.href,使用js来做业务逻辑

编程式导航也有两种传参方式：query和params

 

 

query参数和params参数区别

1.query: 是通过地址栏传参， 参数会在地址栏显示，刷新还在。

2.params：是通过内存传参，参数不会在地址栏显示，刷新会消失