vue知识点之route和router的区别是什么

⏰ route

route: 是一个当前路由信息的对象，包括当前 URL 路径、查询参数、路径参数等信息。route 对象是只读的，不可以直接修改其属性值，而需要通过路由跳转来更新。

主要的属性有：

this.$route.path     //字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ews
this.$route.params   //对象，包含路由中的动态片段和全匹配片段的键值对，不会拼接到路由的url后面
this.$route.query    //对象，包含路由中查询参数的键值对。会拼接到路由url后面
this.$route.router   //路由规则所属的路由器
this.$route.name     //当前路由的名字，如果没有使用具体路径，则名字为空

🔊：route 在每个组件实例对象中都有，是原本就定义好的，天生的，主要记录当前路由的信息。当路由信息改变时，route记录下当前路由的信息，方便组件基于当前的路由信息进行某些操作。

⏰ router

router:是 Vue Router 的实例对象，包括了许多用于导航控制和路由操作的 API，例如 push、replace、go、forward 等方法。router 可以用来动态地改变 URL，从而实现页面间的无刷新跳转。

整个工程就有一个，通过

主要的属性有：

//常规方法
this.$router.push("/login");
//使用对象的形式 不带参数
this.$router.push({ path:"/login" });
//使用对象的形式，参数为地址栏上的参数
this.$router.push({ path:"/login",query:{username:"jack"} }); 
//使用对象的形式 ，参数为params 不会显示在地址栏
this.$router.push({ name:'user' , params: {id:123} });

🔊：router 后来配置的，通过 new VueRouter()得来的，全局就只有一个实例对象，通过

import VueRouter from 'vue-router'
import router from '@/router/index'
//注册vue-router
Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router //将vue-router 实例对象 放到 Vue 实例上，然后让每个组件实例对象都共享这一个router
}).$mount('#app')

让每一个组件实例对象都能访问到它。