前言
本章是為了以后實現前端頁面的搭建而寫的，
重點在於如何實現 單頁Web應用
因為相對於以前的傳統多頁面web，有很大的缺陷。
那么就必須了解一下Vue的路由設置。
SPA的概念
總的而言，我們知道之前的話都是用的是許多jsp,或html頁面來組成我們的項目的。
那么這樣有什么缺點呢？
- 每次請求返回的體積太大，加大了服務器的壓力
- 頁面較大的話，會影響頁面的加載速度。
- 不能提供給用戶良好的體驗
所以，在以上的缺點的問題在SPA都能解決
SPA(single page application，SPA）
SPA,中每次加載都是獲取到自己所需要的特定數據，所以才方便快捷。
所以要用各種組件合成的路由來構建SPA
路由的創建
先理清思路：
- 先將需要用到的組件寫好。
- 給寫好的組件合成一個路由（規划路線）。
- 將合成好的路由放到路由器中。
- 將路由器掛載在vue的實列上。
- 定義瞄點 （body）
- 嘗試跳轉 (body)
<script type="text/javascript">
//定義兩個組件
const Home = Vue.extend({
template: '<div><p>這是一個Home組件</p><div>Home組件內容</div></div>' }); const About = Vue.extend({ template: '<div><p>這是一個About組件</p><div>About組件內容</div></div>' }); //定義路由 //規划路線 var routes = [{ path: '/Home', component: Home }, { path: '/About', component: About }]; //將路由放入到路由器中 const router = new VueRouter({ routes }); new Vue({ el: '#app', router, data() { return { msg: "hello" }; } }); </script>
路由的使用
<router-link to="/Home">//就代表着使用Path 名字為Home 的組件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.js"></script>
<title></title>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>文本</h3>
{{msg}}
</li>
<li>
<!-- 定義錨點 -->
<router-link to="/Home">go to Home</router-link>
<router-link to="/About">go to About</router-link>
</li>
<li>
<router-view></router-view>
</li>
</ul>
</div>
</body>
</html>
router-link的相關屬性
replace
加了這個之后就可以消除歷史記錄。
導航后不會留下 history 記錄
<router-link to="/Home" replace>go to Home</router-link>
以及一些跟導航相關的操作：
this.$router.go(-1) ：代表着后退
this.$router.go(1)：代表着前進
this.$router.push({ 切換到name為home的路由
name:'home'
});
注意這個只能在vue的實列中使用
1 new Vue({
2 el:"#app", 3 // 將路由器掛載到指定邊界 4 router: router, 5 data: function() { 6 return { 7 ts: new Date().getTime() 8 } 9 }，methods:{ 10 doForward:function(){ 11 console.log('doForward方法被調用'); 12 this.$router.go(1); 13 }, 14 doBack:function(){ 15 console.log('doBack方法被調用'); 16 this.$router.go(-1); 17 } 18 } 19 });
append
這個也就是改變地址欄的位置
設置 append 屬性后，則在當前 (相對) 路徑前添加基路徑。例如，我們從 /a 導航到一個相對路徑 b，如果沒有配置 append，則路徑為 /b，如果配了，則為 /a/b
<router-link to="/Home" append>go to Home</router-link>
渲染
有時候想要 <router-link> 渲染成某種標簽，例如 `<li>`。於是我們使用 tag prop 類指定何種標簽，同樣它還是會監聽點擊，觸發導航
<router-link to="/foo" tag="li">foo</router-link> <!-- 渲染結果 --> <li>foo</li>
總結
為了以后整合頁面，打好基礎
Thanks♪(･ω･)ﾉ希望對大家有所幫助