vue2路由基本用法例項分析
本文例項講述了vue2路由基本用法。分享給大家供大家參考，具體如下：
Vue-router 是給Vue.js 提供路由管理的外掛，利用hash 的變化控制動態元件的切換。以往頁面間跳轉都由後端MVC 中Controller 層控制，通過<a> 標籤的href 或者直接修改location.href，我們會向服務端發起一個請求，服務端響應後根據所接收到的資訊去獲取資料和指派對應的模板，渲染成HTML 再返回給瀏覽器，解析成我們可見的頁面。Vue.js +Vue-router 的組合將這一套邏輯放在了前端去執行，切換到對應的元件後再向後端請求資料，填充進模板來，在瀏覽器端完成HTML 的渲染。這樣也有助於前後端分離，前端不用依賴於後端的邏輯，只需要後端提供資料介面即可。
引用方式：
在HTML 中直接用script 標籤引入即可，例如：
<script src="<%=request.getContextPath()%>/lib/vue-router.js"></script>
注意：vue的引入要放在vue-router的之前，不然vue-router會不起作用。
基本用法：
本文章將結合boostrap中的樣式來做案例，實現導航條，點選實現不同的頁面。
<%@ 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">
<%--定義跳轉的路徑--%>
<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 模板建立元件*/
var Home = Vue.extend({
template:'#modalTel'
})
/*建立路由器例項*/
const router = new VueRouter({
routes:[
/*預設時的路徑*/
{ 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>
這樣整個執行成功了。
這樣，簡單的路由例項就完成了。
路由物件：
在使用Vue-router 啟動應用時，每個匹配的元件例項中都會被注入router 的物件，稱之為路由物件。在元件內部可以通過this.$route 的方式進行呼叫。
路由物件總共包含了以下幾個屬性：
1．$route.path
型別為字串，為當前路由的絕對路徑，如/list/1。
2．$route.params
型別為物件。包含路由中動態片段和全匹配片段的鍵值對。如上述例子中的/list/:page路徑，就可以通過this.$route.params.page 的方式來獲取路徑上page 的值。
3．$route.query
型別為物件。包含路由中查詢引數的鍵值對。例如/list/1?sort=createTime,通過this.$route.query.sort 即可得到createTime。
4．$route.router
即路由例項，可以通過呼叫其go，replace 方法進行跳轉。我們在元件例項中也可以直接呼叫this.$router 來訪問路由例項。router 具體的屬性和api 方法將在7.1.10 路由例項中進行說明。
5．$route.matched
6．$route.name
型別為字串，即為當前路由設定的name 屬性。
希望本文所述對大家vue.js程式設計有所幫助。