vue2路由基本用法實(shí)例分析

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

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

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

引用方式：

在HTML 中直接用script 標(biāo)簽引入即可，例如：

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

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

基本用法：

本文章將結(jié)合boostrap中的樣式來做案例，實(shí)現(xiàn)導(dǎo)航條，點(diǎn)擊實(shí)現(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)建路由器實(shí)例*/
  const router = new VueRouter({
    routes:[
        /*默認(rèn)時(shí)的路徑*/
      { 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>

這樣整個(gè)運(yùn)行成功了。

vue2路由基本用法實(shí)例分析

這樣，簡(jiǎn)單的路由實(shí)例就完成了。

路由對(duì)象：

在使用Vue-router 啟動(dòng)應(yīng)用時(shí)，每個(gè)匹配的組件實(shí)例中都會(huì)被注入router 的對(duì)象，稱之為路由對(duì)象。在組件內(nèi)部可以通過this.$route 的方式進(jìn)行調(diào)用。

路由對(duì)象總共包含了以下幾個(gè)屬性：

1．$route.path

類型為字符串，為當(dāng)前路由的絕對(duì)路徑，如/list/1。

2．$route.params

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

3．$route.query

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

4．$route.router

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

5．$route.matched

6．$route.name

類型為字符串，即為當(dāng)前路由設(shè)置的name 屬性。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

當(dāng)前標(biāo)題：vue2路由基本用法實(shí)例分析
本文網(wǎng)址：http://jinyejixie.com/article22/gpgccc.html

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

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

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

vue2路由基本用法實(shí)例分析