脚本宝典收集整理的这篇文章主要介绍了学习vue2教程中的简单路由，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

这是实例的代码

作为一个新手，本文谈的是我在学习 vue-2.0-simple-routing-example 的一些理解。操作系统为 win7，以下：

环境部分

下载好程序包后，解压到任意的盘，假设 e 盘。然后打开 cmd,跳往项目路径，输入

cd e:/vue-2.0-simple-routing-example-master

回车，再输入

e:

回车，这样我们就到了项目路径。然后输入

npm install

建立项目环境和依赖。完成后输入

npm run dev

运行服务器和项目，成功后在浏览器中打开 localhost:8080，这样我们就能看到实时的对项目的修改结果了。

项目代码部分

main.js

webpack.config.js 中的 entry 属性告诉我们项目以 main.js 作为入口。

main.js 首先引入 vue 和 routes，vue 不多说，routes 是路径参数。

import 和 export 困扰了我很久，因为用 script 标签引入 JSON 对象很方便，但在 node 环境开发中就很麻烦，所以理解它俩花了我很多功夫和时间。

import 用来引入函数、对象或者模块，export 用来输出函数、对象或者模块，它们目前只能在 babel 等转换器中实现，浏览器不支持。

然后创建实例，el 挂载 #app，currentRoute 由 window.location.pathname 得到 '/'。

computed 属性中的 Viewcomponent 函数计算当前应该渲染的组件，由 routes[this.currentRoute] 得到组件名称。如果存在该组件，则加载该组件，如果不存在，则加载 404.vue 组件。

目前加载的是 Home.vue 组件。

Home.vue

home.vue 是主页的组件，模板是

<template>     <;main-layout>         <p>Welcome home</p>     </main-layout> </template> 

结构与 About.vue 和 404.vue 类似。然后引入 MainLayout,来自 Main.vue 组件。

这里有个 slot 的知识点。

除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。

父组件 Home.vue 的<p>Welcome home</p>会插入到 Main.vue 中<slot></slot>所在的位置。

当 Main.vue 作为子组件渲染完毕后，Home.vue 作为对象export给父组件 <div id="app"></div>

Main.vue

main.vue 的作用是页面的布局，模板是

<template>   <div class="container">     <ul>       <li>         <v-link href="/">Home</v-link>         <v-link href="/about">About</v-link>       </li>     </ul>     <slot></slot>   </div> </template> 

v-link，这是这个案例的核心。

然后引入VLink。

当 VLink.vue 作为子组件渲染完毕后，Main.vue 作为对象 export 给父组件Home.vue

Vlink.vue

VLink.vue组件渲染链接，模板是

<template>   <a     v-bind:href="href"     v-bind:class="{ active: isActive }"     v-on:click="go"   >     <slot></slot>   </a> </template> 

在 js 代码段引入 routes 得到地址参数，v-bind:href="href" 绑定链接地址，第一个 href 需要 PRops 的声明，否则出现未定义错误，这里还用到了类型检测。

v-bind:href 的值来自 Main.vue 中的 <v-link href="/">Home</v-link>的"/"。

在 Main.vue 中有两个 v-link 组件，渲染第二个 v-link 时，v-bind:href 的值是"/about"。

slot插值的算法参看Home.vue

v-bind:class 绑定类，这影响到链接的样式。

computed 属性计算 isactive 的值，如果和 this.$root.currentRoute 的值相同，class 显示 isactive，否则不显示。

v-on:click绑定鼠标点击事件，点击后运行go函数。

event.preventDefault()防止默认行为，这里是页面跳转。

this.$root.currentRoute = this.href变更组件路径，行为反馈到main.js的ViewComponent ()，实例中的 render 重新渲染组件。

window.history.pushState()是浏览器的历史记录API，是HTML5的新API。

history.pushState()

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！&nbsp;vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的学习vue2教程中的简单路由全部内容，希望文章能够帮你解决学习vue2教程中的简单路由所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。