用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js 时，我们就已经把组件组合成一个应用了，当你要把 vue-router 加进来，只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染它们。
vue-router的使用一
一、在html的代码中，我们写一个简单的例子。这里的vue.js和vue-router的版本都是2。如果vue版本不对应，就不会生效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../vue.js"></script> <script type="text/javascript" src="../vue-router.js"></script> </head> <body> <div id="app"> <h1>Hello App!</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> <script type="text/javascript" src="js/vue7.js"></script> </body> </html>
二、在js中的代码如下：
// 0. 如果使用模块化机制编程， 要调用 Vue.use(VueRouter) // 1. 定义（路由）组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器， // 或者，只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例，然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // （缩写）相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app') // 现在，应用已经启动了！
三、运行的效果如下：当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active。
vue-router的使用二
一、定义一个嵌套的路由，html的代码没有做改变。js里面增加以下的代码：
const Person = { template: '<div class="user"><h2>User {{ $route.params.id }}</h2><router-view></router-view></div>' } const Huhx = { template: '<div style="color: red;">my name is huhx.</div>' }
增加路由的映射，代码如下：
const routes = [{ path: '/foo', component: Foo }, { path: '/bar', component: Bar }, { path: '/user/:id', component: User }, { path: '/person/:id', component: Person, children: [ { path: 'huhx', component: Huhx } ] }]
运行的效果如下：
模拟一下路由的原理
一、主页面的代码huhx3.html内容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../jquery-3.1.0.js"></script> <script type="text/javascript" src="js/app3.js"></script> </head> <body> <ul> <li><a href="#/">首页</a></li> <li><a href="#/product">产品</a></li> <li><a href="#/server">服务</a></li> </ul> <div id="content"></div> </body> </html>
其中测试中包含的两个碎片页如下：
- page.html:
<div style="color: red">Hello World</div>
- product.html:
<div style="background-color: #CCCCCC; text-shadow: 2px 2px 4px red">I love you.</div>
关于js的代码如下：app3.js
function load() { var url = window.location.href; // get the router var index = url.indexOf("#"); var routeUrl = url.substring(index, url.length); alert("routeUrl: " + routeUrl); // 比较Router对象，加载页面 if (routeUrl == "#/server") { $("#content").load("page.html"); } else if (routeUrl == "#/product") { $("#content").load("product.html"); } else { $("#content").load("<span>huhx</span>"); } } window.addEventListener('hashchange', function() { load(); }, false);
二、运行效果如下：注意到url点击两次，并没有触发hashchange事件。下面我们说一下这个事件，了解这样实现的缺点。
关于路由，请参考博客：https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history
友情链接
- vue-router的文档：http://router.vuejs.org/