微客导航 » 文章资讯 » vue2路由基本用法实例分析

vue2路由基本用法实例分析

2023-07-29 17:51:03 163

本文实例讲述了vue2路由基本用法。分享给大家供大家参考，具体如下：

Vue-router是给Vue.js提供路由管理的插件，利用hash的变化控制动态组件的切换。以往页面间跳转都由后端MVC中Controller层控制，通过标签的href或者直接修改location.href，我们会向服务端发起一个请求，服务端响应后根据所接收到的信息去获取数据和指派对应的模板，渲染成HTML再返回给浏览器，解析成我们可见的页面。Vue.js+Vue-router的组合将这一套逻辑放在了前端去执行，切换到对应的组件后再向后端请求数据，填充进模板来，在浏览器端完成HTML的渲染。这样也有助于前后端分离，前端不用依赖于后端的逻辑，只需要后端提供数据接口即可。

引用方式：

在HTML中直接用script标签引入即可，例如：

/lib/vue-router.js">

注意：vue的引入要放在vue-router的之前，不然vue-router会不起作用。

基本用法：

本文章将结合boostrap中的样式来做案例，实现导航条，点击实现不同的页面。

<%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%>
<%@pagecontentType="text/html;charset=UTF-8"language="java"%>


routerTest1







Brand

<%--定义跳转的路径--%>

Home

List

thisishomepage

importFile.jsp

<%@pagecontentType="text/html;charset=UTF-8"language="java"%>


框架文件
/frame/bootstrap-3.1.1/css/bootstrap.css"rel="externalnofollow"rel="stylesheet">

/lib/vue-router.js">
/lib/jquery.min.js">
/frame/bootstrap-3.1.1/js/bootstrap.min.js">

这样整个运行成功了。

这样，简单的路由实例就完成了。

路由对象：

在使用Vue-router启动应用时，每个匹配的组件实例中都会被注入router的对象，称之为路由对象。在组件内部可以通过this.$route的方式进行调用。

路由对象总共包含了以下几个属性：

1．$route.path

类型为字符串，为当前路由的绝对路径，如/list/1。

2．$route.params

类型为对象。包含路由中动态片段和全匹配片段的键值对。如上述例子中的/list/:page路径，就可以通过this.$route.params.page的方式来获取路径上page的值。

3．$route.query

类型为对象。包含路由中查询参数的键值对。例如/list/1?sort=createTime,通过this.$route.query.sort即可得到createTime。

4．$route.router

即路由实例，可以通过调用其go，replace方法进行跳转。我们在组件实例中也可以直接调用this.$router来访问路由实例。router具体的属性和api方法将在7.1.10路由实例中进行说明。

5．$route.matched

6．$route.name

类型为字符串，即为当前路由设置的name属性。

希望本文所述对大家vue.js程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue2路由基本用法实例分析

thisishomepage

热门推荐

随机推荐