zoukankan      html  css  js  c++  java
  • 非node环境 vue-rouder 学习笔录4 命名视图

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <div id="app">
    <h1>Named Views</h1>
    <ul>
    <li>
    <router-link to="/">/</router-link>
    </li>
    <li>
    <router-link to="/other">/other</router-link>
    </li>
    </ul>
    <router-view class="view one"></router-view>
    <router-view class="view two" name="a"></router-view>
    <router-view class="view three" name="b"></router-view>
    </div>
    <script type="text/javascript">
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    const Baz = { template: '<div>baz</div>' }
    const router = new VueRouter({
    mode: 'history',
    routes: [
    { path: '/',
    // a single route can define multiple named components
    // which will be rendered into <router-view>s with corresponding names.
    components: {
    default: Foo,
    a: Bar,
    b: Baz
    }
    },
    {
    path: '/other',
    components: {
    default: Baz,
    a: Bar,
    b: Foo
    }
    }
    ]
    })
    new Vue({
    router,
    el: '#app'
    })

    </script>

  • 相关阅读:
    航空公司客户价值分析
    电力窃漏电用户自动识别
    信息论基础
    Xgboost
    直线或曲线拟合
    matplotlib中绘图
    pandas中绘图
    matplotlib图形设置
    子图subplot
    时间序列:时间序列理论、时间序列建模
  • 原文地址:https://www.cnblogs.com/itadong/p/7111666.html
Copyright © 2011-2022 走看看