前言 本章是為了以後實現前端頁面的搭建而寫的， 重點在於如何實現 單頁Web應用 因為相對於以前的傳統多頁面web，有很大的缺陷。 那麼就必須瞭解一下Vue的路由設置。 SPA的概念 總的而言，我們知道之前的話都是用的是許多jsp,或html頁面來組成我們的項目的。 那麼這樣有什麼缺點呢？ 所以，在 ...
前言
本章是為了以後實現前端頁面的搭建而寫的，
重點在於如何實現 單頁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♪(･ω･)ﾉ希望對大家有所幫助
