Vue 前端路由 vue router

1、前端路由

後端路由：多頁面，伺服器端渲染好返回給瀏覽器。

前後端分離：後端只提供api來返回資料，前端通過ajax獲取資料後，在通過一定的方式渲染到頁面上。

spa：前後端分離+前端路由。

spa只有乙個html檔案，整個**的所有內容都在這乙個html裡，通過js來處理。

2、vue-router

路由不同的頁面實時上就是載入不同的元件。

3、示例

需要安裝vue-router

（1）載入外掛程式

import vue from 'vue';

import vuerouter from 'vue-router';
//載入vue-router外掛程式
vue.use(vuerouter);

注意：from後的模組都是小寫。

（2）路由設定

//

路由配置,配置路由匹配列表
//webpack會把每乙個路由打包為乙個js檔案，在請求該頁面時，載入這個頁面的js，非同步實現懶載入（按需載入）
const routers =[
,//對映的元件
component: (resolve) => require(['./views/index.vue'], resolve)},,
component: (resolve) => require(['./views/about.vue'], resolve)},,
component: (resolve) => require(['./views/user.vue'], resolve)
},//訪問的路徑不存在時，重定向到首頁。
];const routerconfig =;
const router = new vuerouter(routerconfig);

注意：path屬性值後有'/'.

component: (resolve) => require(['./views/user.vue'], resolve)

resolve實現非同步載入，按需載入。

命名路由使用：

,

//命名路由
name:'index',
//對映的元件
component: (resolve) => require(['./views/index.vue'], resolve)
}

跳轉到 about

命名路由的配置好處是：路徑都在main.js中配置好了，改變路徑的話只需要在main.js中配置即可，不需要在所有使用的地方進行配置。

plugins: [

//css單獨打
newextracttextplugin()
]

（4）配置webpack-dev-server支援history路由

"scripts": ,

--history-api-fallback  所有的路由都指向index.html

（5）掛載路由元件

（6）跳轉

方式1：

跳轉到 about

to是乙個屬性，同樣可以使用v-bind進行動態設定。如：

跳轉到 about

方法二：

跳轉到 user

（7）導航鉤子

//

導航鉤子，beforeeach路由改變前觸發
//to形參 即將進入的路由物件
//from 即將離開的路由物件
//next 呼叫改方法後才能進入下乙個鉤子，設定為false時，可以取消導航，設定為具體路徑時可以導航到指定的頁面
next(『/login』)

router.beforeeach((to, from, next) =>); 

//導航鉤子，aftereach路由改變後觸發
router.aftereach((to, from, next) =>);

next(false):next的引數設定為false時，取消導航/跳轉效果。

（8）虛擬dom

new

vue(
});

注意：vue 在建立 vue 例項時，通過呼叫 render 方法來渲染例項的 dom 樹。

h就是createelement,只是換了乙個名稱。

（9）vue元件需要乙個標籤進行包裹（如div）

跳轉到 about

vue route 帶引數 vue 路由傳參

v router的注意事項 使用name和params組合傳參 this.router.push 注釋 路由的配置 import vue from vue import router from vue router vue.use router export default new router 獲...

前端 Vue路由

為了提高瀏覽器頁面響應速度，在功能的開發中，應該盡量避免建立多個頁面，因為瀏覽器在頁面的跳轉過程中會先刪除之前的介面，然後重新渲染新載入介面上的dom元素，這一過程中會給瀏覽器造成很大的壓力。這樣就有了spa。vue.js路由允許我們通過不同的url訪問不同的內容，實現spa。1 引入對應的vue ...

Vue前端路由

因為是基於vue的前端路由 所以需要先引入vue 之後再引用vue router.1.首先要找到示例vue控制的區域 留下乙個路由佔位符顯示模板的內容 2.在vue中有乙個新的標籤user和a標籤相似 to user 就等價於 herf user 3.要在script中寫跳轉的模板 4.將模板掛載到...