vue路由vue-route
首先先引入插件
<script src="Vue.js"></script> //vue.js在前面
<script src="vue-route.js"></script>
然后写在页面展示的代码
<div id="div">
<ul>
<li><a v-link="{path:'/home'}">首页</a></li>
<li><a v-link="{path:'/news'}">新闻</a></li>
</ul>
<router-view></router-view>
</div>
实现路由的js代码
<script>
//1.开启路由;
var app = Vue.extend();
//2.定义模板:
var Home = Vue.extend({
template: '<h3>我是首页的内容</h3>'
});
var News = Vue.extend({
template: '<h3>我是新闻的内容</h3>'
});
//3.定义路由:
var Router = new VueRouter();
Router.map({
'/home': {
component: Home
},
'/news': {
component: News
}
});
//开始:
Router.start(app,'#div');
</script>
vue路由vue-route的更多相关文章
- 六、vue路由Vue Router
一.基本概念 route, routes, router 1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, a ...
- Dynamic Route Matching Vue路由(1)
Dynamic Route Matching 动态的 路由 匹配 Very often we will need to map routes with the given pattern to the ...
- vue路由的使用
ue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用 ...
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- vue路由
vue-router 现在的应用都流行SPA应用(single page application) 传统的项目大多使用多页面结构,需要切换内容的时候我们往往会进行单个html文件的跳转,这个时候受网络 ...
- Vue路由学习心得
GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍 1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- vue路由详解
自己看vue文档,难免有些地方不懂,自己整理一下,主要是vue-router具体实现的操作步骤. 安装 直接下载/CDN https://unpkg.com/vue-router/dist/vue-r ...
- vue 路由(1)
路由的使用 (5步) 1.首先安装路由 npm install vue-router2.引入 vue-router import VueRouter from 'vue-router' 3.使用 ...
- vue路由动态过渡效果
不多说,直接上代码 import Vue from 'vue' //引入vue import VueRouter from 'vue-router' //引入路由 Vue.use(VueRouter) ...
随机推荐
- javascript正则表达式小技巧
一.中括号[]里面的特殊字符是不用转义的,例如[/].[.].[*].[?].[+]都是可以直接匹配对应的字符\ . *?+.下面是测试结果: 所以,/[\d.]/这个正则表达式实际上是匹配数字字符或 ...
- Haproxy 8种算法+Session共享
Haproxy有8种负载均衡算法(balance),分别如下: 1.balance roundrobin # 轮询,软负载均衡基本都具备这种算法 2.balance static-rr # 根据权重, ...
- vscode - 选中多行操作
选中Alt+鼠标左键即可,按ESC退出 ,具体演示效果如下
- 自己定义circle
写了一个还不错的自己定义控件.用来展示完毕度或能力值,程序中配置好所占百分比.图中就能够用外面的圆环来显示百分比,效果还是不错的~ watermark/2/text/aHR0cDovL2Jsb2cuY ...
- react-native 常见操作 及 git 补充
一. react-native 常见操作 1.创建项目 react-native init Market(项目名称,首字母大写) 2.安装常用插件 npm install react-native-t ...
- Jeewx 捷微管家操作配置文档(开源版本号)
1.1.1. 公众帐号管理 (1)捷微是第三方微信公众帐号管理平台,使用本平台前,请自行注冊申请微信公众帐号,操作流程请參照百度经验[怎样注冊微信公众帐号]: http://jingyan.baid ...
- 【HTML5】元素<script>与<noscript>的使用
功能描述 在新建的页面中增加一个文本框"txtContent"和一个按钮"请点击我":当单击按钮时.通过页面中加入的JavaScript脚本获取为文本框中的内容 ...
- 娓娓道来c指针 (2)内存分配
(2)内存分配 c语言中描写叙述变量的时候经常使用的两个用语 1.作用域:也叫可见域,指的是变量的作用范围. 在哪个范围内.该变量是可见的.能够使用的. 2.生存期:也叫存储期.指的是变量从创建到销毁 ...
- C#中FileStream和StreamWriter/StreamReader的区别
首先致谢!转自:http://blog.sina.com.cn/s/blog_67299aec0100snk4.html 本篇可能不是非常深入,但是胜在清晰明了 FileStream对象表示在 ...
- .NET CORE 2.0小白笔记(五):配置的热更新、配置的框架设计
配置的热更新 什么是热更新:一般来说,我们创建的项目都无法做到热更新:即项目无需重启,修改配置文件后读取到的信息就是修改配置之后的 我们只需要吧项目中用到的IOptions改成IOptionsSnap ...