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 ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
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解码unicode编码的中文字符代码分享
2014/08/13 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
php实现登陆模块功能示例
2016/10/20 PHP
php给数组赋值的实例方法
2019/09/26 PHP
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
python 使用get_argument获取url query参数
2017/04/28 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
python移位运算的实现
2019/07/15 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Django xadmin安装及使用详解
2020/10/26 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
学习雷锋标语
2014/06/25 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
卫生主题班会
2015/08/14 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
Python中异常处理用法
2021/11/27 Python