欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

vue2路由基本用法實例分析

本文實例講述了vue2路由基本用法。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)建站專注于定興企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設公司,商城網(wǎng)站建設。定興網(wǎng)站建設公司,為定興等地區(qū)提供建站服務。全流程按需網(wǎng)站開發(fā)，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務

Vue-router 是給Vue.js 提供路由管理的插件，利用hash 的變化控制動態(tài)組件的切換。以往頁面間跳轉(zhuǎn)都由后端MVC 中Controller 層控制，通過<a> 標簽的href 或者直接修改location.href，我們會向服務端發(fā)起一個請求，服務端響應后根據(jù)所接收到的信息去獲取數(shù)據(jù)和指派對應的模板，渲染成HTML 再返回給瀏覽器，解析成我們可見的頁面。Vue.js +Vue-router 的組合將這一套邏輯放在了前端去執(zhí)行，切換到對應的組件后再向后端請求數(shù)據(jù)，填充進模板來，在瀏覽器端完成HTML 的渲染。這樣也有助于前后端分離，前端不用依賴于后端的邏輯，只需要后端提供數(shù)據(jù)接口即可。

引用方式：

在HTML 中直接用script 標簽引入即可，例如：

<script src="<%=request.getContextPath()%>/lib/vue-router.js"></script>

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

基本用法：

本文章將結(jié)合boostrap中的樣式來做案例，實現(xiàn)導航條，點擊實現(xiàn)不同的頁面。

<%@ 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">
          <%--定義跳轉(zhuǎn)的路徑--%>
          <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>
    <h2> this is home page </h2>

  </div>

</script>
<script>

  /*
   * var Home = Vue.extend({
   template:'<h2> this is home page </h2>',
   })
   * */
  /*使用Javascrip 模板創(chuàng)建組件*/
  var Home = Vue.extend({
    template:'#modalTel'
  })

  /*創(chuàng)建路由器實例*/
  const router = new VueRouter({
    routes:[
        /*默認時的路徑*/
      { path: '/', redirect: '/home' },
      {
        path:'/home',
        component:Home,

      },
      {
        path:'/list',
        component:{
          /*顯示一些路由的屬性*/
          template:'<h2> this is list page----{{$route.path}}</h2>'
        }
      }
    ]
  });
  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 的對象，稱之為路由對象。在組件內(nèi)部可以通過this.$route 的方式進行調(diào)用。

路由對象總共包含了以下幾個屬性：

1．$route.path

類型為字符串，為當前路由的絕對路徑，如/list/1。

2．$route.params

類型為對象。包含路由中動態(tài)片段和全匹配片段的鍵值對。如上述例子中的/list/:page路徑，就可以通過this.$route.params.page 的方式來獲取路徑上page 的值。

3．$route.query

類型為對象。包含路由中查詢參數(shù)的鍵值對。例如/list/1?sort=createTime, 通過this.$route.query.sort 即可得到createTime。

4．$route.router

即路由實例，可以通過調(diào)用其go，replace 方法進行跳轉(zhuǎn)。我們在組件實例中也可以直接調(diào)用this.$router 來訪問路由實例。router 具體的屬性和api 方法將在7.1.10 路由實例中進行說明。

5．$route.matched

6．$route.name

類型為字符串，即為當前路由設置的name 屬性。

希望本文所述對大家vue.js程序設計有所幫助。

當前標題：vue2路由基本用法實例分析
本文網(wǎng)址：http://chinadenli.net/article22/gpgccc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設計、微信公眾號、軟件開發(fā)、網(wǎng)站導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設公司