从零开始学习vue-router

一、前言学习vue-router，首先要知道这里的路由是什么？为什么我们不能像以前那样直接用标签写链接呢？如何使用vue-router？常见的路由操作有哪些？这些问题等等都是本文要讨论的主要问题。2.什么是vue-router？这里的路由并不是指我们通常所说的硬件路由器。这里的路由是SPA（SinglePageApplication）的路径管理器。通俗地说，vue-router就是WebApp的链接路径管理系统。Vue-router是Vue.js的官方路由插件。它与vue.js深度集成，适用于构建单页应用。Vue的单页应用是基于路由和组件的。路由用于设置访问路径和映射路径和组件。传统的页面应用使用一些超链接来切换和跳转页面。在vue-router单页应用中，就是路径之间的切换，也就是组件的切换。路由模块的本质是建立url和页面之间的映射关系。至于为什么不能使用a标签，是因为Vue是用来做单页应用的（当你的项目准备打包时，当你运行npmrunbuild时，会生成一个dist文件夹，里面只包含static资源和一个index.html页面），所以你写的标签将不起作用，你必须使用vue-router来管理它们。3、vue-router实现原理SPA（单页应用）：只有一个完整页面的单页应用；当它加载一个页面时，它不会加载整个页面，而只会更新指定容器中的内容。单页应用（SPA）的核心之一是：在不重新请求页面的情况下更新视图；vue-router在实现单页面前端路由时，提供了两种方式：Hash方式和History方式；根据模式参数决定使用哪一种方法。1.哈希模式：vue-router默认的哈希模式——使用URL的哈希来模拟一个完整的URL，所以当URL改变时，页面不会重新加载。哈希（#）是URL的锚点，代表网页中的一个位置。只需更改#后面的部分，浏览器只会滚动到相应位置而不会重新加载网页，也就是说hash出现在URL中。但是它不会包含在http请求中，对后端根本没有影响，所以改变hash不会重新加载页面；同时，每修改一次#后面的部分，浏览器的访问历史记录中就会添加一条记录，使用“返回”按钮，可以返回到之前的位置；所以Hash模式通过锚点值的变化，根据不同的值在指定的DOM位置渲染不同的数据。hash方式的原理是onhashchange事件（监听hash值的变化），可以在window对象上监听。2.history模式：由于hash模式在url中会有#，如果不想hash难看，我们可以使用路由的history模式，在配置路由规则的时候加上"mode:'history'"即可,这种模式充分利用了html5history接口中新的pushState()和replaceState()方法。这两个方法应用于浏览器记录栈。在已有的back、forward、go的基础上，提供了修改历史的功能。只是当他们进行修改的时候，虽然改变了当前的URL，但是浏览器并不会立即向后端发送请求。//constrouterinthemain.jsfile=newVueRouter({mode:'history',routes:[...]})当你使用历史模式时，url就像一个普通的url，比如http://你的网站。com/user/id看起来更好！不过要玩好这个模式，还需要后台配置支持。因为我们的应用是单页客户端应用，如果后台配置不正确，用户在浏览器中直接访问http://oursite.com/user/id时，会返回404，不好看.所以，你需要在服务器端添加一个涵盖所有情况的候选资源：如果URL没有匹配到任何静态资源，它应该返回相同的index.html页面，也就是你的应用所依赖的页面。exportconstroutes=[{path:"/",name:"homeLink",component:Home}{path:"/register",name:"registerLink",component:Register},{path:"/login",名称:"loginLink",component:Login},{path:"*",redirect:"/"}]这里如果网址输入错误或者网址不匹配任何静态资源，会自动跳转到首页3、使用路由模块实现页面跳转方法方法一：直接修改地址栏方法二：this.$router.push('路由地址')方法三：4.如何使用vue-router1：下载npmivue-router-S2：在main.js中引入importVueRouterfrom'vue-router'；3：安装插件Vue.use(VueRouter)；4：创建路由对象并配置路由规则letrouter=newVueRouter({routes:[{path:'/home',component:Home}]});5：将其路由对象传递给Vue实例，并在options中添加router：router6：在app.vue中留个洞具体实现请参考以下代码：//在main.js文件中引入importVuefrom'vue'；importVueRouterfrom'vue-router';//主要importAppfrom'./components/app.vue';importHomefrom'./components/home.vue'//安装插件Vue.use(VueRouter);//挂载属性//创建路由对象并配置路由规则letrouter=newVueRouter({routes:[//oneobject{path:'/home',component:Home}]});//newVue启动newVue({el:'#app',//让vue知道我们的路由规则router:router,//可以简写routerrender:c=>c(App),})最后记得在app.vue中“留洞”//app.vue五、vue-router参数传递声明式导航和程序化导航router.push(...)都可以传递参数。本文主要介绍前一种传递参数的方法。同样的规则也适用于编程导航。1、使用name传参，在路由文件src/router/index.js中配置name属性routes:[{path:'/',name:'Hello',component:Hello}]inthetemplate(src/App.vue）使用$route.name接收，例如：

{{$route.name}}