溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue2路由基本用法實例分析

發(fā)布時間：2020-10-23 12:56:02 來源：腳本之家 閱讀：162 作者：程序媛-jjl 欄目：web開發(fā)

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

Vue-router 是給Vue.js 提供路由管理的插件，利用hash 的變化控制動態(tài)組件的切換。以往頁面間跳轉(zhuǎn)都由后端MVC 中Controller 層控制，通過<a> 標簽的href 或者直接修改location.href，我們會向服務(wù)端發(fā)起一個請求，服務(wù)端響應(yīng)后根據(jù)所接收到的信息去獲取數(shù)據(jù)和指派對應(yīng)的模板，渲染成HTML 再返回給瀏覽器，解析成我們可見的頁面。Vue.js +Vue-router 的組合將這一套邏輯放在了前端去執(zhí)行，切換到對應(yīng)的組件后再向后端請求數(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)導(dǎo)航條，點擊實現(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 啟動應(yīng)用時，每個匹配的組件實例中都會被注入router 的對象，稱之為路由對象。在組件內(nèi)部可以通過this.$route 的方式進行調(diào)用。

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

1．$route.path

類型為字符串，為當(dāng)前路由的絕對路徑，如/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

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

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

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手