一、前後端渲染和前後端路由

後端渲染:後端已經把資料巢狀在html和css上了，然後後端給前端傳送的是一個完整的html頁面，瀏覽器顯示出來就行了。

前端渲染：前端先去靜態資源伺服器下載html、css、js程式碼，並展示出來，但展示了htmlcss後，當遇到了js程式碼時，js程式碼會向後端傳送請求並接受後端傳送來的資料，然後進行處理(比如說js程式碼要迴圈生成x個input框，後端告訴前端x等於10,然後html就要繼續多生成10個input標籤), 最終得出一個完整的html，這就是前端渲染；

後端路由:

瀏覽器請求的每一個url，後端路由都根據路由表傳送到專門的controller中進行處理（路由表應該是tomcat＋spingMVC的DispacharServlet進行處理的）

前端路由：

前端路由首先是到了sqa階段，由於我們只有一個index頁面，我們想展示不同的頁面，就需要呼叫不同的子元件模板去覆蓋，哪如何根據不同的url去找不同的子元件模板？使用vue-router；

二、前端發展的幾個階段

前端的幾個階段：

1.jsp階段或者template階段：

需要寫html程式碼在jsp中，由於jsp還有java程式碼呼叫資料，所以整個頁面非常不清晰；

或者template階段，html程式碼雖然不和java程式碼在一起寫了，但是仍然是後端渲染，將html頁面渲染好之後傳送給前端；

這個個時候沒有前端路由只有後端路由去根據url找controller；並且是後端渲染；

2.前後端分離階段：

瀏覽器根據不同的url去靜態資源伺服器（可能是node伺服器）請求到不同的一套html、css、js程式碼，將jtml、css渲染好之後，當遇到了js程式碼時，js程式碼會向後端傳送請求並接受後端傳送來的資料，然後進行處理(比如說js程式碼要迴圈生成x個input框，後端告訴前端x等於10,然後html就要繼續多生成10個input標籤), 最終得出一個完整的html，這就是前端渲染。

雖然，前後端分離階段沒有用到前端路由，但是開始前端渲染；

3.spa階段：

這個時候，整個靜態資源伺服器只有一套html、css、js程式碼，前端伺服器需要根據不同的url程式碼去尋找不同的子元件模板來代替index.html頁面，這個時候就是前端路由；

當然遇到了js程式碼，也需要從後端獲取資料，然後前端渲染；

https://www.bilibili.com/video/BV15741177Eh?p=101&spm_id_from=pageDr

三、路由的幾種模式

路由的幾種模式:

1.hash模式

2.history模式

histroty.back() 相當於 history.go(-1)

histroty.forward() 相當於histroty(1)

四、路由vue-router的簡單使用

1.使用

首先配置vuerouter:

1.npm install vue-router -S

2.配置router檔案下的index.js檔案

3.配置main.js

其次使用vue-router：

1.在app.vue裡配置《router-link》和《router-view》

2.router-link的4個屬性：

3.元件如何通過vue-router切換？

《router-view》標籤會展示我們替換的元件；

vue-router安裝好之後，會往所有的元件裡都有$router屬性；

不用router-link，使用this.$router.push（）進行元件的切換；

五、路由vue-router的高階使用

$router和$route的區別：
$router表示我們在index。js檔案中new的router物件；

$route表示那個路由路徑活躍，我們就去取哪個物件；$route的params屬性就可以取到使用本路由的url的字尾；

1.動態路由

即在index。js檔案中設定一個動態的路由，格式為：

    {
      path:'/user/:suibian',
      component:User,
    },

我們在app.vue的tempalte模板的《router-link》標籤的to屬性中，給：suibain穿什麼值，它就接受什麼值，比如說suibian=aaa，

那麼這個路由就會跳到User.vue元件，但是路由url變成了/usr/aaa；

然後我們在User.vue中可以通過$route.params.suibian獲取到suibian的值的aaa；

2.懶載入

用到時再載入

懶載入的使用方式：

3.巢狀路由

就是子路由；

在indexjs檔案中設定子路由，然後在本vue中再設定《route-link》《router-view》標籤，因為子路由所展示的vue頁面是覆蓋本vue的；

4.傳遞引數

第一方式是使用動態路由的方式，在index.js檔案中的router屬性裡寫變數，

    {
      path:'/user/:suibian',
      component:User,
    }

然後後面的vue檔案通過$router.params.變數名取值；

第二種方式是傳過去一個物件，物件裡有Path，這個屬性是跳轉的url，query是要傳遞的引數；

所有的元件都繼承自vue的原型；

vue的原型是綁定了￥router和￥route，所以￥router和￥route是所有元件都可以用的；

5.全域性導航守衛（路由守衛）

所有的元件都有生命週期函式：

created（）：元件一被建立時呼叫

mounted（）：元件被掛載時呼叫

updated（）：元件被更新時呼叫；

通過這三個生命週期函式，我們可以實現進入某.vue檔案時、。vue檔案載入完成時、。vue檔案資料發生改變時我們可以監聽到並根據自己需要改變；

但是如果每一個。vue檔案都寫著三個函式有點太複雜了，我們可以使用全域性導航守衛。

這是所有的路由都可以用的守衛；除了全域性導航守衛，還有

• 路由獨有導航守衛（具體去官網學習）
• 元件內守衛（具體去官網學習）

如何使用呢？我們以修改頁面的title為例，第一我們先給每個路由定義一個mete屬性，並寫上進入我這個路由後瀏覽器的title要修改成的值，然後在index。js問檔案中使用router呼叫beforeEach（）方法，並呼叫函式

import Vue from 'vue'
import VueRouter from 'vue-router'

//統一管理元件的懶載入
const HelloWorld = () => import('@/components/HelloWorld.vue');


//1.載入vuerouter
Vue.use(VueRouter)

//2.定義路由引射表
const route = [
  {
    path:'/helloworld',
    component:HelloWorld,
    meta:{
      title:'你好世界',
    },
    children:[
      {
        path:'/',
        redirect:'hw222',
      },
      {
        path:'hw111',
        component:HelloWorld111,
      },
      {
        path:'hw222',
        component:HelloWorld222,
      },
    ],
  },
  {
    path:'/test',
    component:Test,
  },

];

//3.初始化路由
const vueRouter =  new VueRouter({
  routes:route,
  mode:'history',
})
//3.1新增路由守衛
vueRouter.beforeEach((to,from,next) => {
  window.document.title = to.matched[0].meta.title;
  next()
})

//4.匯出路由
export default vueRouter;

meta：元資料：描述資料的資料

metacalss：元類，由元類創造類，再由類創造例項；

除了由路由守衛beforeEach還有路由鉤子afterEach，這些都和路由獨有守衛、元件守衛一樣自己去官網看吧。