溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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>
<h2> this is home page </h2>
</div>
</script>
<script>
/*
* var Home = Vue.extend({
template:'<h2> this is home page </h2>',
})
* */
/*使用Javascrip 模板創建組件*/
var Home = Vue.extend({
template:'#modalTel'
})
/*創建路由器實例*/
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>
這樣整個運行成功了。
這樣，簡單的路由實例就完成了。
路由對象：
在使用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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
