Vue 前端路由 vue-router

一、前端路由

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

前端路由：改變url不向服務器發送請求；前端能夠監聽url變化；前端能夠解析url並執行相應操做。

 

先後端分離：後端只提供API來返回數據，前端經過ajax獲取數據後，在經過必定的方式渲染到頁面上。

SPA：先後端分離+前端路由。

SPA只有一個html文件，整個網站的全部內容都在這一個html裏，經過js來處理。

 

二、vue-router

路由不一樣的頁面實時上就是加載不一樣的組件。

 

三、示例

github地址：https://github.com/MengFangui/VueRouter

須要安裝vue-router

（1）加載插件

import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './app.vue'; //加載vue-router插件
Vue.use(VueRouter);

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

（2）路由設置

// 路由配置,配置路由匹配列表 //webpack會把每個路由打包爲一個js文件，在請求該頁面時，加載這個頁面的js，異步實現懶加載（按需加載）
const Routers = [ { //匹配的路徑
        path: '/index', //  meta: { title: '首頁' }, //映射的組件
        component: (resolve) => require(['./views/index.vue'], resolve) }, { path: '/about', meta: { title: '關於' }, component: (resolve) => require(['./views/about.vue'], resolve) }, { //路由到同一個頁面，數據不一樣
        path: '/user/:id', meta: { title: '我的主頁' }, component: (resolve) => require(['./views/user.vue'], resolve) }, //訪問的路徑不存在時，重定向到首頁。
 { path: '*', redirect: '/index' } ]; const RouterConfig = { // 使用 HTML5 的 History 路由模式，經過‘/’設置路徑
    mode: 'history', routes: Routers }; const router = new VueRouter(RouterConfig);

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

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

resolve實現異步加載，按需加載。


命名路由使用：

{ //匹配的路徑
        path: '/index', //常量參數定義
 meta: { title: '首頁' }, //命名路由
        name:'index', //映射的組件
        component: (resolve) => require(['./views/index.vue'], resolve) }

<router-link :to="{name:'about'}">跳轉到 about</router-link>

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

（3）將將每一個頁面的樣式都打包到一個css文件，webpack.config.js

plugins: [ //css單獨打
        new ExtractTextPlugin({ filename: '[name].css', //將每一個頁面的樣式都打包到一個css文件
            allChunks: true }) ]

 

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

"scripts": { "dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js", "bulid": "webpack --progress --hide-modules --config webpack.prod.config.js" },

--history-api-fallback  全部的路由都指向index.html

（5）掛載路由組件

<template>
    <div>
        <router-view></router-view>
    </div>
</template>
<script> export default { } </script>

 

（6）跳轉

方式1：

<template>
    <div>
        <h1>首頁</h1>
        <!--router-link會渲染爲一個a標籤 實現跳轉的方式1-->
        <!--router-link 的tag屬性 指定渲染成什麼標籤-->
        <!--router-link 的replace屬性 不會留下history記錄，不能使用後退鍵-->
        <!--router-link 的active-class屬性 路由匹配成功時會自動給當前元素設置爲一個名爲router-link-active的class-->
        <router-link to="/about">跳轉到 about</router-link>
    </div>
</template>
<script> export default { } </script>

to是一個屬性，一樣可使用v-bind進行動態設置。如：

 

<router-link :to="{name:'about'}">跳轉到 about</router-link>

 

 

 

 

方法二：

<template>
    <div>
        <h1>介紹頁</h1>
        <button @click="handleRouter">跳轉到 user</button>
    </div>
</template>
<script> export default { methods: { handleRouter () { //實現跳轉的方式2
                this.$router.push('/user/123'); //不會向history添加新紀錄
                //this.$router.replace('/user/123');
                //在hsitory中前進或者後退多少步
                this.$router.go(-1); } } } </script>

 

（7）導航鉤子

//導航鉤子，beforeEach路由改變前觸發 //to形參 即將進入的路由對象 //from 即將離開的路由對象 //next 調用改方法後才能進入下一個鉤子，設置爲false時，能夠取消導航，設置爲具體路徑時能夠導航到指定的頁面next(‘/login’)

 router.beforeEach((to, from, next) => { window.document.title = to.meta.title; next(); }); 

//導航鉤子，afterEach路由改變後觸發

 router.afterEach((to, from, next) => { window.scrollTo(0, 0); });

 next(false):next的參數設置爲false時，取消導航/跳轉效果。

 （8）虛擬DOM

new Vue({ el: '#app', router: router11, render: h => { return h(App) } });

注意：Vue 在建立 Vue 實例時，經過調用 render 方法來渲染實例的 DOM 樹。

h就是createElement,只是換了一個名稱。

Vue 在調用 render 方法時，會傳入一個 createElement 函數做爲參數，也就是這裏的 h 的實參是 createElement 函數，而後 createElement 會以 APP 爲參數進行調用

 

（9）Vue組件須要一個標籤進行包裹（如div）

<template>
    <div>
        <h1>首頁</h1>
        <!--router-link會渲染爲一個a標籤 實現跳轉的方式1-->
        <!--router-link 的tag屬性 指定渲染成什麼標籤-->
        <!--router-link 的replace屬性 不會留下history記錄，不能使用後退鍵-->
        <!--router-link 的active-class屬性 路由匹配成功時會自動給當前元素設置爲一個名爲router-link-active的class-->
        <router-link to="/about">跳轉到 about</router-link>
    </div>
</template>