主要给大家介绍了关于vue路由的配置和页面切换的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前端路由和后端路由： 后端路由：对于普通的网站，所有的超链接都是url地址，所有url都对应服务器上对应的资源 前端路由：对于单页面应用程序来说，主要通过url的hash（#）来实现不同页面的切换，同时hash还有一个特点HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash实现 在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由 路由的使用 1.创建一个路由对象，当导入vue-router包之后，在window全局对象中就有一个路由

1.vue路由 可以实现单页面应用。 路由三要素： vue路由通过hash的变化切换页面(组件/div) 导航 存储页面(组件）的容器 src/router/index.js路由的配置 实现步骤： 2.router配置 对router文件夹下的index.js进行配置 path：url name：对应的参数的模块名称 component:组件名 用组件时一定要注册 { path: '/product', name: 'Product', component: Product }

引入 在使用vue + vue-router开发SPA的时候，有没有遇到过这样的情况：当我们在列表页和详情页之间切换的时候，如果列表页不做缓存，会导致每次从详情页返回时，列表页都会重新加载。如下图： 细心的朋友已经发现了，当从详情页返回列表页的时候，列表页重载了，这样的体验显然不好，这时我们可以对列表页进行缓存处理。 keep-alive实现页面缓存 我们的项目不一定所有页面都需要做缓存处理，所以这里介绍两种按需缓存的方法： 方法一： 首先在定义路由的时候配置 meta 字段，自定义一个Kee