vue生成路由实例, 使用单个vue文件模板生成路由
一.vue-loader与vue-router配合
$ cnpm install vue-router --save
二.生成vue-webpack模板
$ vue init webpack-simple vue-demo
三.生成路由实例
src/App.vue
<template>
<div id="app">
{{msg}}
<ul>
<li><router-link to="/home">主页</router-link></li>
<li><router-link to="/news">新闻</router-link></li>
</ul>
<div>
<transition
enter-active-class="animated zoomInleft"
leave-active-class="animated zoomOutRight"
>
<router-view></router-view>
</transition>
</div>
</div>
</template>
src/main.js
import Vue from 'vue'
import VueRouter from 'vue-router' import App from './App.vue'
import routerConfig from './router.config.js' import "./assets/style/animate.css/animate.css"
Vue.use(VueRouter); // 生成路由实例
var router = new VueRouter(routerConfig) new Vue({
el: '#app',
router,
render: h => h(App)
})
src/router.config.js (路由控制)
import Home from "../components/Home.vue"
import News from "../components/News.vue" export default{
routes:[
{path:'/home', component:Home},
{path:'/news', component:News}
]
}
components/Home.vue
<template>
<div id="home">
<h3>我是主页</h3>
</div>
</template>
components/News.vue
<template>
<div id="news">
<h3>我是新闻</h3>
<ul>
<li v-for="val in news">{{val}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "news",
data(){
return {
news:["11111","222222","33333333","444444"]
}
}
}
</script>
vue生成路由实例, 使用单个vue文件模板生成路由的更多相关文章
- 生成Ipa安装包的plist文件后生成下载链接
假设生成的plist文件的下载链接是: https://www.xx.com/download/xx.plist 那么如果想让苹果手机的浏览器点击后开始下载苹果软件包,则网页中的下载链接需要拼接成 i ...
- RF根据单个/多个output文件重新生成log和report文件
场景1:根据单个output文件重新生成log和report文件命令: rebot -d 日志和报告文件保存路径 output.xml文件 场景2:合并两个不同路径下的output文件并生成新的lo ...
- 一、vue基础语法(轻松入门vue)
轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...
- eclipse上ndk环境的搭建&&so文件的生成&&jni文件的调用
JNI是java语言提供的Java和C/C++相互沟通的机制,Java可以通过JNI调用本地的C/C++代码,本地的C/C++的代码也可以调用java代码.JNI 是本地编程接口,Java和C/C++ ...
- Java根据Freemarker模板生成Word文件
1. 准备模板 模板 + 数据 = 模型 1.将准备好的Word模板文件另存为.xml文件(PS:建议使用WPS来创建Word文件,不建议用Office) 2.将.xml文件重命名为.ftl文件 3 ...
- MVC实用架构设计(三)——EF-Code First(3):使用T4模板生成相似代码
前言 经过前面EF的<第一篇>与<第二篇>,我们的数据层功能已经较为完善了,但有不少代码相似度较高,比如负责实体映射的 EntityConfiguration,负责仓储操作的I ...
- ASP.NET MVC 4.0 中使用NPOI 2.2.0 按模板生成Excel报表
使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 WORD/EXCEL 文档进行读写.NPOI是构建在POI 3.x版本之上的,它可以在没有安装Office的情况下对Word/ ...
- vue生成路由实例
一.vue路由https://router.vuejs.org/zh-cn/1.bower下载vue-routervue的里的链接 <router-link to="/home&quo ...
- Vue.js—组件快速入门及Vue路由实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
随机推荐
- 【WP8】键盘弹出时控制Frame位置
WP上,当使用TextBox输入文字的时候,键盘会把TextBox向上推一段距离 当编辑第二个TextBox的时候,页面被上推,键盘刚好和TextBox靠在一起 当编辑第一个TextBox的时候,页面 ...
- 理解IOC
理解IOC 1 IoC理论的背景 我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 ...
- 详解MathType中如何更改公式颜色
在MathType数学公式编辑器中可以通过更改公式颜色,起到美化.标注公式的效果.本教程将详解MathType中如何更改公式颜色. 点击菜单栏中的样式->格式->颜色,用户就可以根据自己的 ...
- JS貪食蛇網頁代碼
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- linux环境中安装NRPE插件执行远程"本地资源"检查?NRPE安装?
需求描述: 在安装完nagios之后,需要对本地资源进行监控,比如磁盘空间的使用,进程数,swap空间,等等.这些都不是通过网络提供出来的, 所以,都是本地资源,可以通过NRPE插件实现在客户端中采集 ...
- chrome插件开发之调试
https://blog.csdn.net/qustdong/article/details/46046553
- numpy和Matplotlib篇---2
原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 5.3 Python的科学计算包 - Numpy numpy(Numerical Python ...
- 九度 1482:玛雅人的密码(BFS)
题目描述: 玛雅人有一种密码,如果字符串中出现连续的2012四个数字就能解开密码.给一个长度为N的字符串,(2=<N<=13)该字符串中只含有0,1,2三种数字,问这个字符串要移位几次才能 ...
- windows 下获取当前进程的线程数量
#include <TlHelp32.h> int get_thread_amount() { ; ]; PROCESSENTRY32 pe32; pe32.dwSize = sizeof ...
- iOS 图片剪切和压缩的几个方法
// 图片剪切 - (UIImage*)clipImageWithImage:(UIImage*)image inRect:(CGRect)rect { CGImageRef imageRef ...