介绍

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

如果你只是开发简单页面的话，就没必要用到此功能，但是需要开发单页应用的话，vue-router 将是不错的选择

下面给出一个例子说明 vue-router 的使用

详细说明，可参考官方文档

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS Router</title>
</head>
<body>
    <div id="app">
      <h1>VueJS Router</h1>
      <ul>
        <li><router-link to="/">Index</router-link></li>
        <li><router-link to="/detail">Detail</router-link></li>
        <li><router-link to="/detail/intro">Intro</router-link></li>
        <li><router-link to="/detail/read">Read</router-link></li>
        <li><router-link to="/param/1">Param</router-link></li>
      </ul>
      <div><router-view class="view"></router-view></div>
    </div>
    
    <script src="http://cdn.bootcss.com/vue/2.0.3/vue.js"></script>
    <script src="http://cdn.bootcss.com/vue-router/2.0.1/vue-router.js"></script>
    <script type="text/javascript">
    const Detail = {
        template: '<div><h1>Book Detail</h1><router-view></router-view></div>'
    }
    const Book = {
        template: '<h1>Book Index</h1>'
    }

    const DetailIndex = {
        template: '<div>detail index</div>'
    }
    const Intro = {
        template: '<div>detail intro</div>'
    }
    const Read = {
        template: '<div>deatil read</div>'
    }

    const Param = {
        template: `<div>Param {{ $route.params.id }}</div>`
    }

    const router = new VueRouter({
        routes: [
            { path: '/', component:Book},
            { path: '/detail', component: Detail,
              children: [
                { path: '', component: DetailIndex },
                { path: 'intro', component: Intro },
                { path: 'read', component: Read }
              ]
            },
            { path: '/param/:id', component: Param }
        ]
    });

    const vm = new Vue({
        router
    }).$mount('#app');
    // 在 $route 里面保存当前路由信息
    // 在 $router 里面保存全部路由信息
    console.log(vm.$route);
    console.log(vm.$router);
    </script>
</body>
</html>

©版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 & 作者信息。

End