Vue.js第二天学习笔记(vue-router)


Posted in Javascript onDecember 01, 2016

vue中vue-router的使用:

Vue.js第二天学习笔记(vue-router)

Vue.js第二天学习笔记(vue-router)

Vue.js第二天学习笔记(vue-router)

main.js如何配置(es6的写法):在引用之前记得先   npm 下所需要的vue

import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'
import Resource from 'vue-resource'
//import VueTouch from 'vue-touch'
var VueTouch = require('vue-touch')

//引入home页面
import homepage from './page/home.vue'
//引入test页面
import test from './page/test.vue'

Vue.use(Router);
Vue.use(Resource);
Vue.use(VueTouch);

var router = new Router({
 abstract: true,
 hashbang: false
});
//实现页面跳转
router.map({
 '/home':{
 component:homepage
 }, 
 '/test':{
 component:test
 }, 
 
})

router.start(App, '#app')
// router.go('test'); 默认直接跳转到 test 页面

index.html中引入app.vue和build.js

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>vue.js学习笔记(2)</title>
 <link rel="stylesheet" type="text/css" href="style/bootstrap.css">
</head>
<body>
 <!--此处注意加载顺序,需要先加载dom在加载js,否则会'Cannot find element: #app'-->
 <div id='app'></div>
 <script src="static/build.js"></script>
</body>
</html>
<style>
body {
}
</style>

app.vue引入router

<template>
<div class='all-container'>
 <div class="public-content">我是公共页面</div>
 <div class='menu'>
 <ul class="list">
 <li><a v-link='"/home"'>home页面</a></li>
 <li><a v-link='"/test"'>test页面</a></li>
 </ul>
 </div>
 <router-view transition='animation' class='container' keep-alive></router-view>
</div>
</template>

home.vue

<template>
<div class="home">
 <div class="htmleaf-content">
 我是home页面的内容
 </div>
</div>
</template>

test.vue

<template>
<div class="test">
 <div class="test-content">
我是test页面的内容
</div>
</div>

</template>

 最后用webpack 将程序打包.关于webpack大家可以看看

Vue.js——60分钟webpack项目模板快速入门

webpack主页

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript语句可以不以;结尾的烦恼
Mar 08 Javascript
JavaScript 对象成员的可见性说明
Oct 16 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 #Javascript
Vue方法与事件处理器详解
Dec 01 #Javascript
简单理解vue中实例属性vm.$els
Dec 01 #Javascript
jsp 自动编译机制详细介绍
Dec 01 #Javascript
基于vue.js实现图片轮播效果
Dec 01 #Javascript
JQuery学习总结【一】
Dec 01 #Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 #Javascript
You might like
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
深入理解vue中的$set
2017/06/01 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
python实现简单的五子棋游戏
2020/09/01 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
素食餐饮项目创业计划书
2014/02/02 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
新学期开学标语2015
2015/07/16 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
Python实现的扫码工具居然这么好用!
2021/06/07 Python
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL