【21】vue.js — 路由

有心部落格發表於2017-09-12
Vue.js路由

vue.js中的路由是根據不同路徑來展示不同的頁面效果

路由入門

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script src="js/vue-router.js"></script>
    </head>
    <body>
        <div id="box">
            <ul>
                <li>
                    <a v-link="{path:'/home'}">主頁</a>
                </li>
                <li>
                    <a v-link="{path:'/news'}">新聞</a>
                </li>
            </ul>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </body>
    <script>
        //1.準備一個根元件
        var App = Vue.extend();
        //2.Home News元件都準備
        var Home = Vue.extend({
            template: '<h3>我是主頁</h3>'
        });
        var News = Vue.extend({
            template: '<h3>我是新聞</h3>'
        });
        //3.準備路由
        var router = new VueRouter();
        //4.關聯
        router.map({
            'home': {
                component: Home
            },
            'news': {
                component: News
            }
        });
        //5.啟動路由
        router.start(App,'#box');
    </script>
</html>

多層路由

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js"></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
        <style>

        </style>
    </head>
    <body>
        <div id="box">
            <ul>
                <li>
                    <a v-link="{path:'/home'}">主頁</a>
                </li>
                <li>
                    <a v-link="{path:'/news'}">新聞</a>
                </li>
            </ul>
            <div>
                <router-view></router-view>
            </div>
        </div>
        <template id="home">
            <h3>我是主頁</h3>
            <div>
                <a v-link="{path:'/home/login'}">登入</a>
                <a v-link="{path:'/home/reg'}">註冊</a>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </template>
        <template id="news">
            <h3>我是新聞</h3>
        </template>
    </body>
    <script>
        //1.準備一個元件
        var App = Vue.extend();

        //2. Home News元件都準備
        var Home = Vue.extend({
            template: '#home'
        });

        var News = Vue.extend({
            template: '#news'
        });

        //3.準備路由
        var router=new VueRouter();

        //4.關聯
        router.map({
            'home': {
                component: Home,
                subRoutes: {
                    'login': {
                        component: {
                            template: '<strong>我是登入資訊<strong>'
                        }
                    },
                    'reg': {
                        component: {
                            template: '<strong>我是註冊資訊</strong>'
                        }
                    }
                }
            },
            'news':{
                component:News
            }
        });
        //5. 啟動路由
        router.start(App,'#box');

        //6. 跳轉
        router.redirect({
            '/':'home'
        });
    </script>
</html>

多層路由

vue中路由傳遞引數

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js"></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
    </head>
    <body>
        <div id="box">
            <ul>
                <li>
                    <a v-link="{path:'/home'}">主頁</a>
                </li>
                <li>
                    <a v-link="{path:'/news'}">新聞</a>
                </li>
            </ul>
            <div>
                <router-view></router-view>
            </div>
        </div>
        <template id="home">
            <h3>我是主頁</h3>
            <div>
                <a v-link="{path:'/home/login'}">登入</a>
                <a v-link="{path:'/home/reg'}">註冊</a>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </template>
        <template id="news">
            <h3>我是新聞</h3>
            <div>
                <a v-link="{path:'/news/detail/001'}">新聞001</a>
                <a v-link="{path:'/news/detail/002'}">新聞002</a>
            </div>
            <router-view></router-view>
        </template>
        <template id="detail">
            {{$route.params | json}}
        </template>
    </body>
    <script>
        //1.準備一個元件
        var App = Vue.extend();

        //2. Home News元件都準備
        var Home = Vue.extend({
            template: '#home'
        });

        var News = Vue.extend({
            template: '#news'
        });

        var Detail = Vue.extend({
            template: '#detail'
        });

        //3.準備路由
        var router=new VueRouter();

        //4.關聯
        router.map({
            'home': {
                component: Home,
                subRoutes: {
                    'login': {
                        component: {
                            template: '<strong>我是登入資訊<strong>'
                        }
                    },
                    'reg': {
                        component: {
                            template: '<strong>我是註冊資訊</strong>'
                        }
                    }
                }
            },
            'news':{
                component:News,
                subRoutes: {
                    '/detail/:id': {
                        component: Detail
                    }
                }
            }
        });
        //5. 啟動路由
        router.start(App,'#box');

        //6. 跳轉
        router.redirect({
            '/':'home'
        });
    </script>
</html>

路由傳遞引數

相關文章