一.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文件模板生成路由的更多相关文章

  1. 生成Ipa安装包的plist文件后生成下载链接

    假设生成的plist文件的下载链接是: https://www.xx.com/download/xx.plist 那么如果想让苹果手机的浏览器点击后开始下载苹果软件包,则网页中的下载链接需要拼接成 i ...

  2. RF根据单个/多个output文件重新生成log和report文件

    场景1:根据单个output文件重新生成log和report文件命令: rebot -d 日志和报告文件保存路径  output.xml文件 场景2:合并两个不同路径下的output文件并生成新的lo ...

  3. 一、vue基础语法(轻松入门vue)

    轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...

  4. eclipse上ndk环境的搭建&&so文件的生成&&jni文件的调用

    JNI是java语言提供的Java和C/C++相互沟通的机制,Java可以通过JNI调用本地的C/C++代码,本地的C/C++的代码也可以调用java代码.JNI 是本地编程接口,Java和C/C++ ...

  5. Java根据Freemarker模板生成Word文件

    1.  准备模板 模板 + 数据 = 模型 1.将准备好的Word模板文件另存为.xml文件(PS:建议使用WPS来创建Word文件,不建议用Office) 2.将.xml文件重命名为.ftl文件 3 ...

  6. MVC实用架构设计(三)——EF-Code First(3):使用T4模板生成相似代码

    前言 经过前面EF的<第一篇>与<第二篇>,我们的数据层功能已经较为完善了,但有不少代码相似度较高,比如负责实体映射的 EntityConfiguration,负责仓储操作的I ...

  7. ASP.NET MVC 4.0 中使用NPOI 2.2.0 按模板生成Excel报表

    使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 WORD/EXCEL 文档进行读写.NPOI是构建在POI 3.x版本之上的,它可以在没有安装Office的情况下对Word/ ...

  8. vue生成路由实例

    一.vue路由https://router.vuejs.org/zh-cn/1.bower下载vue-routervue的里的链接 <router-link to="/home&quo ...

  9. Vue.js—组件快速入门及Vue路由实例应用

    上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...

随机推荐

  1. 【WP8】键盘弹出时控制Frame位置

    WP上,当使用TextBox输入文字的时候,键盘会把TextBox向上推一段距离 当编辑第二个TextBox的时候,页面被上推,键盘刚好和TextBox靠在一起 当编辑第一个TextBox的时候,页面 ...

  2. 理解IOC

    理解IOC 1 IoC理论的背景    我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 ...

  3. 详解MathType中如何更改公式颜色

    在MathType数学公式编辑器中可以通过更改公式颜色,起到美化.标注公式的效果.本教程将详解MathType中如何更改公式颜色. 点击菜单栏中的样式->格式->颜色,用户就可以根据自己的 ...

  4. JS貪食蛇網頁代碼

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  5. linux环境中安装NRPE插件执行远程"本地资源"检查?NRPE安装?

    需求描述: 在安装完nagios之后,需要对本地资源进行监控,比如磁盘空间的使用,进程数,swap空间,等等.这些都不是通过网络提供出来的, 所以,都是本地资源,可以通过NRPE插件实现在客户端中采集 ...

  6. chrome插件开发之调试

    https://blog.csdn.net/qustdong/article/details/46046553

  7. numpy和Matplotlib篇---2

    原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 5.3 Python的科学计算包 - Numpy numpy(Numerical Python ...

  8. 九度 1482:玛雅人的密码(BFS)

    题目描述: 玛雅人有一种密码,如果字符串中出现连续的2012四个数字就能解开密码.给一个长度为N的字符串,(2=<N<=13)该字符串中只含有0,1,2三种数字,问这个字符串要移位几次才能 ...

  9. windows 下获取当前进程的线程数量

    #include <TlHelp32.h> int get_thread_amount() { ; ]; PROCESSENTRY32 pe32; pe32.dwSize = sizeof ...

  10. iOS 图片剪切和压缩的几个方法

    // 图片剪切 - (UIImage*)clipImageWithImage:(UIImage*)image inRect:(CGRect)rect {    CGImageRef imageRef ...