vue router

時間 2019-11-19

標籤 vue router 简体版

原文原文鏈接

參考：css

　　https://router.vuejs.org/zh-cn/advanced/lazy-loading.htmlhtml

路由懶加載

// 配置文件
module.exports = {
    entry: {
        index: './index.js',
    },
    output: {
        path: __dirname + "/dist",
        filename: "[name].js",
        publicPath:"./dist/"
    },
    devtool: 'eval-source-map',
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["es2015"],
                        plugins: ["syntax-dynamic-import"]
                    }
                },
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [".vue",".js",".json"],
        alias: {
            'vue$': 'vue/dist/vue.js',
        }
    }
};

// ./routers/uA.vue
<template>
    <div>
        aaaaaaaaaaa
    </div>
</template>

<script>
    export default {
        name: "v-a"
    }
</script>
<style scoped></style>

// ./routers/uB.vue
<template>
    <div>
        bbbbbbbbbbb
    </div>
</template>

<script>
    export default {
        name: "v-b"
    }
</script>
<style scoped></style>

// index.js
import VueRouter from "vue-router"
import Vue from "vue"

const vA = ()=> import('./routers/vA')
const vB = ()=> import('./routers/vB')

const router = new VueRouter({
    routes: [
        { path: '/a', component: vA },
        { path: '/b', component: vB }
    ]
})
Vue.use(VueRouter)
new Vue({
    el:"#root",
    router:router
});

// main.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <router-link to="/a">Go to a</router-link>
        <router-link to="/b">Go to b</router-link>
        <router-view></router-view>
    </div>
</body>
<script src="dist/index.js"></script>
</html>

// 依賴
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.8",
    "style-loader": "^0.19.1",
    "vue": "^2.5.13",
    "vue-loader": "^13.6.2",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.10.0"
  }

View Code

僅當這個路由組件第一次須要被顯示的時候，纔會下載這個組件。打包後dist出現這幾個文件:vue

0和1表明被異步加載的路由組件。 node

若是手誤，import一個vue-loader，則會報以下錯誤：webpack

WARNING in ./node_modules/vue-loader/lib/utils/try-require.js
12:11-27 Critical dependency: the request of a dependency is an expression
@ ./node_modules/vue-loader/lib/utils/try-require.js
@ ./node_modules/vue-loader/lib/loader.js
@ ./node_modules/vue-loader/index.js
@ ./index.jsweb

ERROR in ./node_modules/resolve/lib/async.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\MRLWJ\Desktop\test\router\node_modules\resolve\lib'
@ ./node_modules/resolve/lib/async.js 2:9-22
@ ./node_modules/resolve/index.js
@ ./node_modules/vue-loader/lib/utils/try-require.js
@ ./node_modules/vue-loader/lib/loader.js
@ ./node_modules/vue-loader/index.js
@ ./index.jsvue-router

Api

關於路由守衛：https://router.vuejs.org/zh-cn/advanced/navigation-guards.htmlexpress

this.$router.push('/qwe')：json

　　修改路由爲 #/qwe（路由組件會切換），不發出請求babel

router.onReady

　　回調函數被調用的時候，就意味着當前要顯示的（同步或者異步）路由組件已經準備好了，這時這個路由組件尚未完成掛載（onReady的回調函數在組件beforeCreate前執行）。

router.beforeEach

　　在路由切換前執行（頁面打開時也會執行一次），回調函數中須要調用next（），不然路由不切換。能夠註冊多個，會按次序執行，上一個沒有執行next的話，下一個不會執行，路由不會切換，當最後一個執行了next時，路由纔開始切換（組件開始掛載）

文檔中提示的觸發流程以下：

Navigation triggered.
Call leave guards in deactivated components.
Call global beforeEach guards.
Call beforeRouteUpdate guards in reused components (2.2+).
Call beforeEnter in route configs.
Resolve async route components.
Call beforeRouteEnter in activated components.
Call global beforeResolve guards (2.5+).
Navigation confirmed.
Call global afterEach hooks.
DOM updates triggered.
Call callbacks passed to next in beforeRouteEnter guards with instantiated instances.

以上流程中，只要next沒執行，就不會到下一步，如進行如下設置：

beforeRouteEnter(to,form,next){
    setTimeout(()=>{
        next()
    },2000)
}

則全局的beforeResolve會等待以上的next執行後執行。

切換路由，組件由A->B時：

在路由中，component reused 的意思是路由沒有發生變化，而僅僅參數發生了變化（user/1 -> user/2），這時組件中的鉤子 beforeRouteUpdate會執行。

相關標籤/搜索

vue+vuex+axios+iview+router

vue-router的基礎

vue+vue

vue

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。