vue-router(2.0)

用Vue.js+vue-router创建单页应用是比较简单的。使用Vue.js时，我们就已经把组件组合成一个应用了，当你要把vue-router加进来，只要配置组件和路由映射，然后告诉vue-router在哪里渲染它们。举例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  <div id="app">
    <h1>Hello Vue-router!</h1>
    <p>
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <router-view></router-view>
  </div>
  </body>
  <script src="http://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js"></script>
  <script src="http://cdn.bootcss.com/vue-router/2.0.0-rc.7/vue-router.js"></script>
  <script>
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }

    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]

    const router = new VueRouter({
      routes // short for routes: routes
    })

    const app = new Vue({
      router
    }).$mount('#app');
  </script>
</html>

结果：

动态路由匹配

可以在 vue-router 的路由路径中使用“动态路径参数”

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  <div id="app">
    <h1>Hello Vue-router!</h1>
    <p>
      <router-link to="/foo/first">Go to First</router-link>
      <router-link to="/foo/second">Go to Second</router-link>
    </p>
    <router-view></router-view>
  </div>
  </body>
  <script src="http://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js"></script>
  <script src="http://cdn.bootcss.com/vue-router/2.0.0-rc.7/vue-router.js"></script>
  <script>
    const Foo = { template: '<div>foo {{ $route.params.id }}</div>' }
    const routes = [
      { path: '/foo/:id', component: Foo },
    ]

    const router = new VueRouter({
      routes // short for routes: routes
    })

    const app = new Vue({
      router
    }).$mount('#app');
  </script>
</html>

结果：

嵌套路由

URL中各段动态路径可以按某种结构对应嵌套各层组件。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="app">
    <p>
      <router-link to="/user/foo">/user</router-link>
      <router-link to="/user/foo/profile">/user/profile</router-link>
      <router-link to="/user/foo/posts">/user/posts</router-link>
    </p>
    <router-view></router-view>
    </div>
  </body>
  <script src="http://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js"></script>
  <script src="http://cdn.bootcss.com/vue-router/2.0.0-rc.7/vue-router.js"></script>
  <script>
    const User = {
      template:
      `
        <div class="user">
          <h2>User {{ $route.params.id }}</h2>
          <router-view></router-view>
        </div>
      `
    }

    const UserHome = { template: '<div>Home</div>' }
    const UserProfile = { template: '<div>Profile</div>' }
    const UserPosts = { template: '<div>Posts</div>' }

    const router = new VueRouter({
      routes: [
        { path: '/user/:id', component: User,
          children: [
            { path: '', component: UserHome },

            { path: 'profile', component: UserProfile },

            { path: 'posts', component: UserPosts }
          ]
        }
      ]
    });
    const app = new Vue({ router }).$mount('#app');
  </script>
</html>

结果：

 

posted @ 2016-10-14 15:40  wj704  阅读(1117)  评论(0)  编辑  收藏  举报