成都网站建设设计

将想法与焦点和您一起共享

vue2路由基本用法实例分析

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

创新互联建站专注于定兴企业网站建设,成都响应式网站建设公司,商城网站建设。定兴网站建设公司,为定兴等地区提供建站服务。全流程按需网站开发,专业设计,全程项目跟踪,创新互联建站专业和态度为您提供的服务

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

引用方式:

在HTML 中直接用script 标签引入即可,例如:

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

基本用法:

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

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


  routerTest1
  


importFile.jsp

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


  框架文件
  
  
  
  
  

 






这样整个运行成功了。

 vue2路由基本用法实例分析

vue2路由基本用法实例分析

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

路由对象:

在使用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程序设计有所帮助。


网站标题:vue2路由基本用法实例分析
标题来源:http://chengdu.cdxwcx.cn/article/gpgccc.html