快捷導(dǎo)航

vue2路由基本用法實例分析

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

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

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

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

基本用法：

本文章將結(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>
    <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)建路由器實例*/
  const router = new VueRouter({
    routes:[
        /*默認(rèn)時的路徑*/
      { 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>

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