vue2路由基本用法实例分析


Posted in Javascript onMarch 06, 2020

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

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

引用方式:

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

<script src="<%=request.getContextPath()%>/lib/vue-router.js"></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" %>
<html>
<head>
  <title>routerTest1</title>
  <c:import url="importFile.jsp"></c:import>
</head>
<body>
<div id="app">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#" rel="external nofollow" >Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <%--定义跳转的路径--%>
          <li class="active"> <router-link to="/home">Home</router-link></li>
          <li> <router-link to="/list">List</router-link></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <!—路由切换组件template 插入的位置 -->
    <router-view></router-view>
  </div>
</div>

<script type="x-template" id="modalTel">
  <div>
    <h1> this is home page </h1>

  </div>

</script>
<script>

  /*
   * var Home = Vue.extend({
   template:'<h1> this is home page </h1>',
   })
   * */
  /*使用Javascrip 模板创建组件*/
  var Home = Vue.extend({
    template:'#modalTel'
  })

  /*创建路由器实例*/
  const router = new VueRouter({
    routes:[
        /*默认时的路径*/
      { path: '/', redirect: '/home' },
      {
        path:'/home',
        component:Home,

      },
      {
        path:'/list',
        component:{
          /*显示一些路由的属性*/
          template:'<h1> this is list page----{{$route.path}}</h1>'
        }
      }
    ]
  });
  const app = new Vue({
    router:router
  }).$mount('#app')
</script>
</body>
</html>

importFile.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>框架文件</title>
  <link href="<%=request.getContextPath()%>/frame/bootstrap-3.1.1/css/bootstrap.css" rel="external nofollow" rel="stylesheet">
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  <script src="<%=request.getContextPath()%>/lib/vue-router.js"></script>
  <script src="<%=request.getContextPath()%>/lib/jquery.min.js"></script>
  <script src="<%=request.getContextPath()%>/frame/bootstrap-3.1.1/js/bootstrap.min.js"></script>

 
</head>
<body>

</body>
</html>

这样整个运行成功了。

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

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
详解使用create-react-app快速构建React开发环境
May 16 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vue 动态组件用法示例小结
Mar 06 #Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 #Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 #Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 #Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 #Javascript
JS实现网页端猜数字小游戏
Mar 06 #Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 #Javascript
You might like
PHP中for循环语句的几种变型
2007/03/16 PHP
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
prototype class详解
2006/09/07 Javascript
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
js中的闭包学习心得
2018/02/06 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
python Flask实现restful api service
2017/12/04 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
Python异常处理操作实例详解
2018/05/10 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
Python 项目转化为so文件实例
2019/12/23 Python
Python实现自动整理文件的脚本
2020/12/17 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
护士自荐信怎么写
2015/03/06 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python