vue中路由的認識

時間 2019-11-10

標籤 vue 路由認識欄目系統網絡简体版

原文原文鏈接

　　vue.js中路由的本質以及應用javascript

　　路由容許咱們經過不一樣的 URL 訪問不一樣的內容。該 URL 能夠是咱們本身設置的,在項目中並無這樣的文件夾,這種功能就是路由.html

　　路由的本質是hash值!vue

　　vue 中的路由設置分爲四步曲 : java

　　　　定 : 定義路由組件vue-router

　　　配 : 配置路由app

　　　　實 : 實例化路由模塊化

　　　　掛 : 掛載路由spa

　　實例:3d

　　1. 在HTML中寫入內容code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>路由設置</title>
        <!-- 在引入js文件時須要先引入vue.js  -->
        <script type="text/javascript" src="js/vue.js">    </script>
        <script type="text/javascript" src="js/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <!--  router-link 至關於超連接  -->
            <router-link to="/aa">主頁</router-link>
            <router-link to="/bb">列表</router-link>
            <router-link to="/cc">尾頁</router-link>
            <router-view>
                <!-- 用於盛放模塊  -->
                
            </router-view>
        </div>
    </body>
</html>

　　2.模塊化思想設置vue路由

<!--  模板  -->
<template id="home">
    <div>
        這是主頁的內容!
    </div>
</template>
<template id="bb">
    <div>
        這是bb頁的內容!
    </div>
</template>
<template id="cc">
    <div>
        這是cc頁的內容!
    </div>
</template>
<script type="text/javascript">
    // vue 路由四部曲   定 配 實 掛
    // 定義路由組件
    let Home = {
        template:"#home",
    }
    let Bb = {
        template:"#bb",
    }
    let Cc = {
        template:"#cc",
    }
    // 配置路由
    let routs = [
        {path:"/aa",component:Home},
        {path:"/bb",component:Bb},
        {path:"/cc",component:Cc}
    ]
    
    // 實例化路由
    let router = new VueRouter({
        routes : routs  // routes 是固定的
    });
    
    // 掛載路由
    let app = new Vue({
        el:"#app",
        data:{},
        router:router // 固定的
    })
</script>