Vue-Router路由Vue-CLI腳手架和模塊化開發之 vue-router路由

時間 2019-11-17

標籤 vue router 路由 cli 腳手架模塊化開發欄目系統網絡简体版

原文原文鏈接

vue-router路由：Vue.js官網推出的路由管理器，方便的構建單頁應用；javascript

單頁應用（SPA）只有一個web頁面的應用，用戶與應用交互時，動態更新該頁面的內容；簡單來講，根據不一樣的url與數據，將他們都顯示在同一個頁面中，就可稱爲單頁應用；而控制頁面跳轉須要用路由。html

vue-router下載：下載js,或使用npm install vue-router-S;vue

vue-router使用：java

一、定義組件；web

二、配置路由；vue-router

三、建立路由對象；npm

四、注入路由url

vue-router官網：https://router.vuejs.org/zh/spa

實例：code

代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue-router</title>
    </head>
    <body>
        <div id="one">
            <router-link to="/home">首頁</router-link>
            <router-link to="/foods">美食</router-link>
            
            <div>
                <!--將數據顯示在這裏-->
                <router-view></router-view>
            </div>
        </div>
    </body>
    
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript" src="../js/vue-router.js" ></script>
    <script>
        
        //1 定義組件
        let Home = {
            template : "<h2>首頁</h2>"
        }
        let Foods = {
            template : "<h2>美食</h2>"
        }
        
        //2 配置路由 路由可能有多個
        const myRoutes = [
            {
                path : "/home",
                component : Home
            },
            {
                path : "/foods",
                component : Foods
            }
        ]
        
        // 3 建立路由對象
        const myRouter = new VueRouter({
            //routes : routes
            routes : myRoutes
        });
        
        new Vue({
            //router : router
            router : myRouter //4 注入路由 簡寫
        }).$mount("#one");
    </script>
</html>