node.js方式:

利用node.js安装vue-router模块

cnpm install vue-router

安装完成后我们引入这个模板!

下载vue-router利用script引入方式:

我们也可以把vue-router下载下来

附上地址:https://unpkg.com/vue-router/dist/vue-router.js

在html里用<script>加载!

我们就以script为例

首先我们要引入vue.js在引入vue-router.js

vue-router.js依赖于vue.js

HTML:

<script type="text/javascript" src="vue.js></script>
<script type="text/javascript" src="vue-router.js></script>

<div id="app">

<h1>Hello router.js!</h1>

<!-- 使用 router-link 组件来导航. -->

<!-- 通过传入 `to` 属性指定链接. -->

<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

<router-link to="/router1">路由一</router-link>   <!------当我们点击这标签,它会触发router1路由,然后会在router-view渲染出我们定义的组件,我们地址栏也会多出/router1-->

<router-link to="/router2">路由二</router-link>

<router-view></router-view>  //  <-----这个是 我们路由要渲染地方,如果我们没有router-view这个标签,我们的路由就无法渲染到页面-->

</div>

JS:

第一步定义组件:

var router1 = {template:<div>我是路由组件一号</div>}

var router2 = {template:<div>我是路由组件二号</div>}

第二步定义路由:

var routers = [

{path:"/router1",component:router1},

{path:"/router2",component:router2}

]

第三步创建路由的实例

var router = new VueRouter({

routers                                             //routers=routers

})

第四步创建和挂载实例

var vm = new Vue({

router

}).$mount("#app")

<!---最后附上router.js完整的教程地址---->

附上地址: http://router.vuejs.org/zh-cn/essentials/getting-started.html

vue.js利用vue.router创建前端路由的更多相关文章

  1. Vue.js 第4章 组件与路由

    组件 什么是组件:组件就是一些标签结构的封装,同时为这些结构添加需要的业务逻辑,设置你想要的样式 一个组件中一般可以设置:结构,功能和样式 为什么要使用组件: 使用方便 复用 组件的创建和使用 组件的 ...

  2. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  3. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  4. Vue.js经典开源项目汇总-前端参考资源

    Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...

  5. Vue.js中,如何自己维护路由跳转记录?

    在Vue的项目中,如果我们想要做返回.回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你 ...

  6. vue.js(1)--创建vue实例的基本结构

    vue实例基本结构与MVVM框架 (1)vue实例基本结构 <!DOCTYPE html> <html lang="en"> <head> &l ...

  7. vue.js 利用SocketCluster实现动态添加数据及排序

    直接上代码 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  8. vue.js 利用组件之间通讯,写一个弹出框例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 学习Vue.js之vue移动端框架到底哪家强

    官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...

随机推荐

  1. Python开发【模块】:torndb

    Torndb模块 概要:torndb是一个轻量级的基于MySQLdb封装的一个模块,其是tornado框架的一部分.其项目主页为:https://github.com/bdarnell/torndb ...

  2. CentOS 6.4下Squid代理服务器的安装与配置(转)

    add by zhj: 其实我们主要还是关注它在服务器端使用时,充当反向代理和静态数据缓存.至于普通代理和透明代理,其实相当于客户端做的事,和服务端没有什么关系.另外,Squid的缓存主要是缓存在硬盘 ...

  3. EOS Dapp开发(1)-基于Docker的开发环境搭建

    随着EOS主网的上线,相信基于EOS的Dapp开发会越来越多,查阅了很多资料相关的开发资料都不是很多,只能自己摸索,按照网上仅有的几篇教程,先git clonehttps://github.com/E ...

  4. Python学习开发资源大全列表

    1 机器学习和计算机视觉 Crab:灵活.快速的推荐引擎 gensim:人性化的话题建模库 hebel:GPU 加速的深度学习库 NuPIC:智能计算 Numenta 平台 pattern:Pytho ...

  5. python模块之shutil高级文件操作

    简介 shutil模块提供了大量的文件的高级操作.特别针对文件拷贝和删除,主要功能为目录和文件操作以及压缩操作.对单个文件的操作也可参见os模块. 注意即便是更高级别的文件复制函数(shutil.co ...

  6. scikit-learn 中常用的评估模型

    一,scikit-learn中常用的评估模型 1.评估分类模型: ​ 2.评估回归模型: ​ 二.常见模型评估解析: •对于二分类问题,可将样例根据其真实类别和分类器预测类别划分为:(T,F表示预测的 ...

  7. 121. Best Time to Buy and Sell Stock(股票最大收益)

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  8. uva1423 巧用拓扑排序

    对于一个序列 a1 a2 ... an 我们可以计算出一个符号矩阵A, 其中Si,j 为 a1+...+aj 的正负号,(连加和大于0则Sij=+ 小于0 Sij=-  等于0 则Sij=0), 根据 ...

  9. 【转载】JS Number类型数字位数及IEEE754标准

    JS的基础类型Number,遵循 IEEE 754 规范,采用双精度存储(double precision),占用 64 bit.如图 意义 1位用来表示符号位 11位用来表示指数 52位表示尾数 浮 ...

  10. bzoj3629 / P4397 [JLOI2014]聪明的燕姿

    P4397 [JLOI2014]聪明的燕姿 根据唯一分解定理 $n=q_{1}^{p_{1}}*q_{2}^{p_{2}}*q_{3}^{p_{3}}*......*q_{m}^{p_{m}}$ 而$ ...