zoukankan      html  css  js  c++  java
  • vue-路由

    1

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="bower_components/vue/dist/vue.js"></script>
        <script src="bower_components/vue-router/dist/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>
    
        <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>
    </body>
    </html>

    2

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="bower_components/vue/dist/vue.js"></script>
        <script src="bower_components/vue-router/dist/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>
    
        <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');
    
            //6. 跳转
            router.redirect({
                '/':'/home'
            });
        </script>
    </body>
    </html>

    3.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="bower_components/vue/dist/vue.js"></script>
        <script src="bower_components/vue-router/dist/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>
    
        <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');
    
            //6. 跳转
            router.redirect({
                '/':'home'
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    如何修炼成某一领域的高手?
    宝宝为什么见生人就哭
    绩效管理
    《管理3.0》读书笔记
    卡特尔16PF性格测试与答案
    管理3.0
    偶感
    Javascript事件总结
    HTML5中与页面显示相关的API
    毕业了五年了--- 人生感想
  • 原文地址:https://www.cnblogs.com/lanlanJser/p/7420931.html
Copyright © 2011-2022 走看看