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>
转载于:https://www.cnblogs.com/null11/p/7170774.html
vue.js中的路由vue-router2.0使用相关推荐
- vue.js中mock本地json数据
vue.js中mock本地json数据 新版本的vue项目中已经将dev-server.js,dev-client.js两个js文件合并到了webpack.dev.conf.js文件中,以下分别是新旧 ...
- php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...
- 【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍 轻量级.可靠的移动端 Vue 组件库 有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性 拥 ...
- js div加载html_说说 Vue.js 中的 v-cloak 指令
可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示 ...
- Vue.js中的MVVM
MVVM的理解 MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Mod ...
- VUE.js 中取得后台原生HTML字符串 原样显示问题
今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去 ...
- ie浏览器查看vue中js_浅析 Vue.js 中那些空间换时间的操作
Hello,各位小伙伴,接下来的一段时间里,我会把我的课程<Vue.js 3.0 核心源码解析>中问题的答案陆续在我的公众号发布,由于课程的问题大多数都是开放性的问题,所以我的答案也不一定 ...
- Vue.js中的v-model指令(双向绑定)
Vue.js中v-model的作用 v-model的作用和使用场景 1.v-model的作用--双向绑定 2.v-model双向绑定的使用场景--表单 3.总结 v-model的作用和使用场景 你好! ...
- echarts怎么用在php,在Vue.JS中怎样使用echarts
这次给大家带来在Vue.JS中怎样使用echarts,在Vue.JS中使用echarts的注意事项有哪些,下面就是实战案例,一起来看一下. 上篇文章给大家介绍了 在 webpack 中使用 EChar ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
最新文章
- Shell的sort、uniq、tr、cut、命令和 正则表达式
- 力扣93. 复原 IP 地址(JavaScript)
- 通过二进制方式_部署CNI网络和集群测试---K8S_Google工作笔记0015
- loadrunner 运行脚本-Run-time Settings之Preferences设置
- Linux——CMake更新和安装
- c语言为什么运行慢,【图片】今天写几个性能测试,为什么C语言跑得这么慢呢??【c语言吧】_百度贴吧...
- 怪不得知乎急着招前端开发.
- 谷粒商城:01. 分布式基础项目环境搭建
- system.gc()和system.runFinalization()区别作用
- 软件收集-建筑工程资料软件
- Spring的bean是怎么保证线程安全的
- 相忘于江湖——记另一位朋友
- uni-app 初始化项目
- ECshop生成网站地图url
- 微信打开页面,提示到浏览器上打开
- 小伙入职某互联网大厂的一天(1)
- 分布式事务Seata源码解析十:AT模式回滚日志undo log详细构建过程
- CPU被挖矿,Redis竟是内鬼,
- 新能源光伏发电的原理是怎样太阳能光伏阵列并网发电仿真模拟运行演示系统
- Remove Duplicate