Vue2的路由是基于Vue Router插件。Vue Router是Vue.js官方的路由管理器，用于实现单页面应用程序的路径导航。它可以轻松地将不同的组件映射到不同的URL上，实现页面之间的切换，提高了应用程序的交互性和用户体验。
路由原理
Vue Router的核心是路由器实例(router instance)和路由规则(router rule)。路由器实例负责监听URL地址的变化，根据路由规则匹配相应的组件。路由规则是URL地址和对应的组件之间的映射关系。
在Vue2中，路由器实例是通过Vue Router插件来创建的。在创建路由器实例时，需要指定路由规则。路由规则是一个数组，每个元素都是一个对象，包含了URL地址和对应的组件信息。路由器实例会根据路由规则来匹配URL地址，并将对应的组件渲染到视图中。
路由配置
在Vue2中，路由配置是通过Vue Router插件提供的两个方法来实现的：Vue.use()和new VueRouter()。其中，Vue.use()用于安装Vue Router插件，new VueRouter()用于创建路由器实例。
// 安装Vue Router插件
Vue.use(VueRouter);
// 创建路由器实例
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
]
});
在路由配置中，routes是路由规则数组，每个元素都是一个对象。其中，path表示URL地址，component表示对应的组件。
路由导航
在Vue2中，路由导航是通过router-link组件和router.push()方法来实现的。router-link组件用于生成带有URL地址的链接，router.push()方法用于对URL地址进行跳转。
<!-- 通过router-link生成带有URL地址的链接 -->
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>
<!-- 通过router.push进行URL跳转 -->
<button @click="router.push('/about')">About</button>
在路由导航中，to属性表示要跳转的URL地址。router.push()方法可以接受一个字符串或一个包含URL信息的对象作为参数，用于进行URL跳转。
路由传参
在Vue2中，路由传参是通过$route.params和$route.query来实现的。$route.params用于获取动态路由参数，$route.query用于获取查询参数。
// 路由规则中定义动态路由参数
{ path: '/user/:id', component: User }
// 在组件中获取动态路由参数和查询参数
export default {
mounted() {
// 获取动态路由参数
const id = this.$route.params.id;
// 获取查询参数
const name = this.$route.query.name;
}
}
在路由传参中，动态路由参数需要在路由规则中进行定义，使用:表示参数名称。查询参数可以通过在URL地址中添加?name=value的方式来传递。
总结
Vue2的路由原理基于Vue Router插件，通过路由器实例和路由规则来实现页面之间的切换。路由配置可以通过Vue.use()和new VueRouter()来实现，路由导航可以通过router-link组件和router.push()方法来实现，路由传参可以通过$route.params和$route.query来实现。Vue Router插件提供了丰富的API和钩子函数，可以满足不同的需求，是Vue.js开发单页面应用程序的重要工具之一。**
