vue路由表(简单)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const first = {
template: '<div>first内容</div>'
}
const second = {
template: '<div>second内容</div>'
}
const home = {
template: '<div>home内容</div>'
}
const firstFirst = {
template: '<div>firstFirst内容{{$route.params.id}}</div>'
}
const firstSecond = {
template: '<div>firstSecond内容</div>'
}
const sade = {
template: `
<div class="sade">
<h2>萨德</h2>
<router-view><router-view>
</div>
`
}
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', name: 'home', component: home },
{ path: '/first', component: sade,
children: [
{path: '/', name: 'homefirst', component: first},
{path: 'first', name: 'homefirstFirst', component: firstFirst},
{path: 'second', name: 'homefirstSecond', component: firstSecond}
]
},
{ path: '/second', name: 'home second', component: second }
]
})
new Vue({
router,
template: `
<div id="r">
<h1>导航</h1>
<p>{{$route.name}}</p>
<ol>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/first">/first</router-link></li>
<ol>
<li><router-link :to="{name: 'homefirstFirst', params: {id: 123}}">/first</router-link></li>
<li><router-link :to="{name: 'homefirstSecond', params: {id:456}}">/second</router-link></li>
</ol>
<li><router-link to="/second">/second</router-link><li>
</ol>
<router-view class="sade"></router-view>
</div>
`
}).$mount('#app')
vue路由表(简单)的更多相关文章
- react构建淘票票webapp,及react与vue的简单比较。
前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
- vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
- vue教程2-04 vue实例简单方法
vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...
- 沉淀,再出发:VUE的简单理解
沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...
- vue实现简单在线聊天
vue实现简单在线聊天 引用mui的ui库,ES6的 fetch做网络请求 //html <!DOCTYPE html> <html> <head> <met ...
- VUE实现简单的全选/全不选
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- vue超简单加载字体方法,解决scss难加载字体的问题
vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后 ...
- Vue.js简单实践
直接上代码,一个简单的新闻列表页面(.cshtml): @section CssSection{ <style> [v-cloak] { display: none; } </sty ...
随机推荐
- iOS开发笔记 - 界面调试神器Reveal
http://blog.csdn.net/jackfrued/article/details/50934092 Reveal是iOS开发工具中的神器之一,它能够在应用程序运行过程中调试应用程序 ...
- sql2000/sql2005/sql2008数据库变为0字节修复/MDF文件0字节恢复
[数据恢复故障描述] 这个客户是生产型数据库,数据比较重要,产生量也比较大,客户要求必须尽快修复,保证生产尽快恢复运行.sql数据库文件,由于碎片链接过长,mdf文件突然变为0字节,开始客户尝试自行 ...
- StackExchange.Redis 官方文档(四) KeysScan
KEYS, SCAN, FLUSHDB 方法在哪? 经常有人问这些问题: 好像并没有看到 Keys(...) 或者 Scan(...)方法?那我要怎么查询数据库里面存有哪些key? 或者 好像没有Fl ...
- 2786: [JSOI]Word Query电子字典
2786: [JSOI]Word Query电子字典 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 3 Solved: 3[Submit][Statu ...
- VMWare12安装CentOS7以及redis安装和常用命令
一.vmware安装centos7后没有网卡 VMWare 12版本不提供32位安装程序,只有64位安装程序,如果在安装CentOS时,选择的是CentOS而不是CentOS 64位,则会出现Cent ...
- MVC 与 MVVM
MVC View直接访问Model,View包含Model信息,包括业务逻辑. MVC模型里Model不变,Model不依赖于View,但是 View依赖于Model.因为View实现了一些业务逻辑, ...
- 超强JavaScript编辑器WebStorm代码提示迟缓问题及其它想到的
去D2后发现 Hedger 的js编辑器是webStorm,便下载来试试,结果发现: 虽然WebStorm的js的提示远远不如aptana那么强悍(输入字母d不提示document),但是做为 Int ...
- angular2教程
https://github.com/lewis617/angular2-tutorial
- 使用(Drawable)资源———ClipDrawable资源
ClipDrawable代表从其他位图上截取的一个"图片片段".在XML文件中定义ClipDrawable对象使用<clip.../>元素,该元素的语法为: <? ...
- EhLib DBGridEh组件在Delphi中应用全攻略总结(转)
EhLib DBGridEh组件在Delphi中应用全攻略总结(转) http://blog.sina.com.cn/s/blog_94b1b40001013xn0.html 优化SQL查询:如何写出 ...