JSFiddle - React, Tailwind, and code Playground

by shuai shen

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">
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/user/11">Go to User</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
  <router-view name="b"></router-view>
  <router-view name="c"></router-view>
</div>

CSS

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

Babel + JSX

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar:{{id}}</div>', props: ['id'] }
const Comp1 = { template: '<div>comp1:{{id}}</div>', props: ['id'] }
const Comp2 = {  template: '<div>comp2:{{id}}</div>', props: ['id'] }

// 2.设置b为true可以取到值，c为false取不到值

const routes = [
  { path: '/foo', component: Foo },
  { path: '/user/:id', components: {
  	default: Bar,
    b: Comp1,
    c: Comp2
  }, props: {
  	default: true,
    b: true,
    c: false
  } }
]

// 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!