一，路由原理（hash）
单页应用的路由模式有两种
1、哈希模式（利用hashchange 事件监听 url的hash 的改变） 2、history模式（使用此模式需要后台配合把接口都打到我们打包后的index.html上）
hash模式的原理：
核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变 后立刻发起请求，响应整个页面，渲染整个页面比路由的跳转用户体验更好
二，路由安装和使用（vue2）
导入路由插件
<script src="../js/vue-router.js"></script>
安装路由插件到Vue中
Vue.use(VueRouter);
创建VueRouter对象
// 路由的安装 前提是要导入路由js Vue.use(VueRouter) // 创建一个登录子组件 var login = { template:` <div> 登录页面 </div> `, } // 创建路由配置实例，主要实现，路劲和子组件之间的映射 var myrouter = new VueRouter({ routes:[ {path:'/login/id',name:'login',component:login}, ] })
使用路由
<body> <div id="app"> 头部 <!-- 下面是路由出口 --> <router-view></router-view> 尾部 </div> </body> <script src="../Vue2/js/vue2.7.js"></script> <script src="../Vue2/js/vue-router.js"></script> <script> // 路由的安装 前提是要导入路由js Vue.use(VueRouter) // 创建一个登录子组件 var login = { template:` <div> 个人页面 </div> `, } // 创建路由配置实例，主要实现，路劲和子组件之间的映射 var myrouter = new VueRouter({ routes:[ {path:'/login',name:'login',component:login}, ] }) var app = new Vue({ el:'#app', data(){ return{ } }, router:myrouter, }) </script>
三，路由跳转
路由的跳转有两种方式：
使用标签
<router-link to="/login">登录</router-link>
编程式路由，使用js
this.$router.push({path:'/login'}); this.$router.replace({path:'/login'});
说明：
1.this.$router.push(); 会向history中添加记录
2.this.$router.replace();不会向history中添加记录。
3.this.$router.go(-1)常用来做返回上一个地址。
路由中的对象：
1.this.$route 路由信息对象，只读。
2.this.$router 路由操作对象，只写。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 头部 <router-link to="/login">登录</router-link> <router-link to="/person">个人</router-link> <button @click="toxiaohao">api 王导</button> <!-- 下面是路由出口 --> <router-view></router-view> 尾部 </div> </body> <script src="../Vue2/js/vue2.7.js"></script> <script src="../Vue2/js/vue-router.js"></script> <script> // 路由的安装 前提是要导入路由js Vue.use(VueRouter) // 创建一个登录子组件 var login = { template:` <div> 登录页面 </div> `, } // 创建一个登录子组件 var person = { template:` <div> 个人页面 </div> `, } // 创建一个个人页面子组件 var xiaohao = { template:` <div> 王导页面 </div> `, } // 创建路由配置实例，主要实现，路劲和子组件之间的映射 var myrouter = new VueRouter({ routes:[ {path:'/login',name:'login',component:login}, {path:'/person',name:'person',component:person}, {path:'/xiaohao',name:'xiaohao',component:xiaohao} ] }) var app = new Vue({ el:'#app', data(){ return{ } }, router:myrouter, methods:{ toxiaohao(){ this.$router.replace({ path:'/xiaohao' }) }, } }) </script> </html>
