路由解决的问题

什么是路由（这里不要死抠字眼，尝试从字面上理解，只是一个名词而已，重点是理解名词代表的技术解决什么问题）？生活中最能体现路由功能的是路由器，路由器的作用：互联网中的计算机，必须要通过路由器根据目标机器ip地址，将数据转发到目标机器。

路由的作用：根据请求的地址，将请求转发到匹配的组件上。

后端路由

传统的网站大多数是多页面的，当我们点击一个超链接时，请求发送到服务端，由服务端根据请求路径匹配到不同的Controller，进行各种操作，最终将html或数据返回给前端。当然，目前绝大多数的网站都是这种后端路由，也就是多页面的。这样的好处有很多，比如页面可以在服务端渲染好直接返回给浏览器，不用等待前端加载任何js和css就可以直接显示网页内容，再比如对SEO的友好等。后端路由的缺点也是很明显的，就是模板是由后端来维护或改写的。前端开发者需要安装整套的后端服务，必要时还得学习像PHP或Java这些非前端语言来改写html结构，所以html和数据、逻辑混为一谈，维护起来既臃肿又麻烦。

前端路由

然后就有了前后端分离的开发模式，后端不再返回页面只提供API来返回数据，前端通过Ajax获取数据后，再用一定的方式渲染到页面里，这么做的优点就是前后端做的事情分得很清楚，后端专注在数据上，前端专注在交互和可视化上，如果今后再开发移动App，那就正好能使用一套API了。

随着前端技术的发展，前端功能越来越丰富，出现了大前端的概念，有了不少的单页面富应用。也就是在一个页面，可以使用到应用的所有功能。功能视图之前的切换，不再通过服务端完成，而是通过前端控制，这就是前端路由。

Vue中路由的作用

在Vue中一个功能视图就是一个组件，Vue中路由解决的就是在单页面中组件的显示切换问题。比如有这个一个页面，页面上有2个超链接（登录和注册），点击登录链接显示登录的表单，点击注册连接显示注册的表单。

第1个路由示例

1.页面引入 vue-router.js

<script type="text/javascript" src="js/vue-2.6.12.js"></script> <!--注意引入顺序： vue-router.js 必须在vue.js之后引入 --> <script type="text/javascript" src="js/vue-router-3.4.9.js"></script>

2.定义组件

const loginForm = {template:"#login-form" } const registerForm = {template:"#register-form" }

3.创建 VueRouter对象，配置路由匹配规则

//router对象 var router = new VueRouter({routes:[{name:"login",//路由名称path:"/login",//路由路径component:loginForm//要路由到的组件},{name:"register",path:"/register",component:registerForm}] });

4.向Vue实例中配置router

const vm = new Vue({el:"#app",//router:router //如果路由对象名也叫router，则可以省略:routerrouter })

5.在页面上使用路由

<div id="app"><!-- 超链接的href必须以#开头 --><a href="#/login">登录</a><a href="#/register">注册</a><hr><!-- router-view是路由的锚点，也就是路由到的组件显示的地方 --><router-view></router-view> </div>

router-link和redirect

router-link

router-link标签用于代替a标签，定义跳转超链接

<div id="app"><!-- 超链接的href必须以#开头 --><!--<a href="#/login">登录</a><a href="#/register">注册</a>--><!-- to属性配置跳转路径，不用添加#前缀 --><router-link to="/login">登录</router-link><router-link to="/register">注册</router-link><hr><!-- router-view是路由的锚点，也就是路由到的组件显示的地方 --><router-view></router-view> </div>

redirect

redirect属性用在路由上，比如在a路由上配置redirect:b路由的路径，当访问a时会自动重定向到b。通常用于配置页面的默认路由地址

var router = new VueRouter({routes:[{name:"default",path:"/",redirect:"/login"},{name:"login",//路由名称path:"/login",//路由路径component:loginForm//要路由到的组件},{name:"register",path:"/register",component:registerForm}] });

总结

以上是生活随笔为你收集整理的Vue第二部分(3)：路由 VueRouter的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。