首页 > 代码库 > Vue基础---->vue-router的使用(一)

Vue基础---->vue-router的使用(一)

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

 

Vue基础---->vue-router的使用(一)