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

更新時(shí)間：2020年03月06日 11:07:23 作者：程序媛-jjl

這篇文章主要介紹了vue2路由基本用法,結(jié)合實(shí)例形式分析了vue2路由基本功能、原理、用法與操作注意事項(xiàng),需要的朋友可以參考下

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

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

引用方式：

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

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

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

基本用法：

本文章將結(jié)合boostrap中的樣式來(lái)做案例，實(shí)現(xiàn)導(dǎo)航條，點(diǎn)擊實(shí)現(xiàn)不同的頁(yè)面。

<%@ 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>
    <h1> this is home page </h1>

  </div>

</script>
<script>

  /*
   * var Home = Vue.extend({
   template:'<h1> this is home page </h1>',
   })
   * */
  /*使用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:'<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>

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

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

路由對(duì)象：

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

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

1．$route.path

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

2．$route.params

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

3．$route.query

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

4．$route.router

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

5．$route.matched

6．$route.name

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

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

您可能感興趣的文章: