vue.js中的路由vue-router2.0使用
在我们平时工作中，我们有时候会有需求，按照不同的规则，加载不同的组件，页面不去跳转，常见的操作是ajax的异步操作，实现局部刷新加载新数据
在vue中，我们写了很多不同的组件，这时候，实现不刷新调用新组件，vue为我们提供了非常好用的一个插件，那就是路由
vue-router
我们首先去安装路由
在工具管理器里面我们直接敲命令
npm install vue-router --save
有些同学可能一开始不知道npm是什么东西，那么我们可以去下载vue-router文件到页面中去，像jquery一样引进就可以
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">1</router-link>
<router-link to="/bar">2</router-link>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</body>
<script>
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
let routes=[
{
path:'/foo',
component:Foo
},
{
path:'/bar',
component:Bar
}
]
// 3. 创建 router 实例，然后传 `routes` 配置
let router = new VueRouter({
routes
});
// 4. 创建和挂载根实例。
const app=new Vue({
router
}).$mount('#app');
</script>
</html>
vue.js中的路由vue-router2.0使用的更多相关文章
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- vue.js（20）--vue路由
后端路由 对于普通的网站,所有的超链接都是url地址,所有的url地址都对应着服务器上的资源 前端路由 对于单页面应用程序来说,主要通过单页面中的hash(#)来进行页面的切换.hash的特点是htt ...
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
- Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
- 说说 Vue.js 中的 v-cloak 指令
可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示 ...
- Vue.js 中的 v-cloak 指令
可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示 ...
- vue.js中，input和textarea上的v-model指令到底做了什么？
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
随机推荐
- IIS网站部署步骤以及常见异常解决方案
一. 简述 如果VS调试代码每次都使用浏览器打开,修改脚本和样式等还可以刷新页面显示最新修改,但是修改后台代码的话就需要停止调试再重新使用浏览器打开才能显示后台的最新修改,就比较麻烦.这里推荐附加到I ...
- Python，计算 ax^2 + bx + c = 0的根
1 #-*-coding : utf-8-*- 2 import math 3 4 def quadratic(a, b, c): 5 if not isinstance(a, (int, float ...
- P2668 斗地主 贪心+深搜
题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗地主中,牌的大小关系根据牌的数码表示如下:3<4< ...
- 1619. [HEOI2012]采花
1619. [HEOI2012]采花 ★★☆ 输入文件:1flower.in 输出文件:1flower.out 简单对比 时间限制:5 s 内存限制:128 MB [题目描述] 萧薰儿 ...
- 修改 进程占用资源限制ulimit(限制服务器的链接数目)
ulimit用于限制shell启动进程所占用的资源.其中ulimit -n用于限制进程能够打开的文件描述符的最大数目.因为任何设备在linux下都是文件,通信的接口也有专门的接口文件负责,所以linu ...
- python+opencv+Face++实现人脸识别比对
2018-03-2010:16:55 代码仓库--GitHub--https://github.com/az666/python_opencv_face- 依旧是先来图片 下面这张是我进行识别的效果( ...
- 关于微信小程序：scroll-view，backgroundTextStyle
踩过的坑mark下 1.滚动列表最好不要用scroll-view组件,这个组件有不少问题,比如触顶操作触发了,会连续好几次执行触发函数,得用一个开关变量和定时器配合来控制,一般情况下view组件就够用 ...
- LR接口测试---socket
前提条件: 编译:javac TcpServer.java 启动:java TcpServer ============================================ 代码示例: # ...
- 简单了解了下SEO与SEM的机制
SEO:搜索引擎优化SEM:搜索引擎营销 SEO排名机制:搜索引擎蜘蛛 权重 算法 排名规则 搜索引擎提交入口: 1.百度搜索网站登入口 2.Google网站登入口 3.360搜索引擎登入入口 4.搜 ...
- apache自带的ab压力测试工具
httpd-2.4.27-Win64-VC15 链接: https://pan.baidu.com/s/1027MtVwbq1zjUgF7P7Rrkw 密码: ne6a 下载解压后doc窗口cd .. ...