zoukankan      html  css  js  c++  java
  • vue高级路由

    1.html

    <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>Hello App!</h1>
    <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- <router-link> will be rendered as an `<a>` tag by default -->
    <router-link to="/foo11">Go to Foo</router-link>
    <router-link to="/bar11">Go to Bar</router-link>
    </p>
    <!-- route outlet -->
    <!-- component matched by the route will render here -->
    <router-view></router-view>
    </div>

    2.js

    // 0. If using a module system, call Vue.use(VueRouter)

    // 1. Define route components.
    // These can be imported from other files
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }

    // 2. Define some routes
    // Each route should map to a component. The "component" can
    // either be an actual component constructor created via
    // Vue.extend(), or just a component options object.
    // We'll talk about nested routes later.
    const routes = [
    { path: '/foo111', component: Foo },
    { path: '/bar111', component: Bar }
    ]

    // 3. Create the router instance and pass the `routes` option
    // You can pass in additional options here, but let's
    // keep it simple for now.
    const router = new VueRouter({
    routes
    })

    // 4. Create and mount the root instance.
    // Make sure to inject the router with the router option to make the
    // whole app router-aware.
    const app = new Vue({
    router
    }).$mount('#app')

    // Now the app has started!

    3.css

    .router-link-active {
    color: red;
    }

  • 相关阅读:
    Python 爬虫
    Web 前端编程运维必备
    Docker 运维高级应用管理
    Python 运维之路
    Linux 运维之路
    8086汇编 中断
    8086汇编 rep 指令
    8086汇编 cmp 指令
    8089汇编 标志寄存器
    8086汇编 call 指令
  • 原文地址:https://www.cnblogs.com/liuqiyun/p/8144997.html
Copyright © 2011-2022 走看看