Vue2.0实现路由
Vue2.0和1.0实现路由的方法有差别,现在我用Vue 2.0实现路由跳转,话不多说,直接上代码
HTML代码
<div class="tab">
<router-link to="/goods">商品</router-link>
<router-link to="/rating">评论</router-link>
<router-link to="/seller">商家</router-link>
</div>
<router-view></router-view>
main.js 代码
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Goods from './components/goods/goods.vue'
import Rating from './components/rating/rating.vue'
import Seller from './components/seller/seller.vue'
/* 组件名大写*/
Vue.use(VueRouter);
let routes=[
{
path:'/',redirect:'/goods'
},
{
path:'/goods',component:Goods
},
{
path:'/rating',component:Rating
},
{
path:'/seller',component:Seller
}
];
let router=new VueRouter({
routes,
});
new Vue({
el: '#app',
render: h => h(App),
router
});
Vue2.0实现路由的更多相关文章
- vue2.0配置路由
配置路由之前,先检查vue版本,(案例适用vue2.0) 采用npm包的形式进行安装. 安装路由依赖:npm install vue-router(代码中,如果在一个模块化工程中使用它,必须要通过 V ...
- vue2.0:(五)、路由vue-router
好的,接下来,我们来写路由.用的是vue2.0的路由. 步骤一:配置main.js import Vue from 'vue'; import App from './App'; import rou ...
- vue2.0 路由学习笔记
昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...
- Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?(转)
https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...
- vue2.0路由变化1
路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...
- vue2.0路由进阶
一.路由的模式 第一种用history方式实现,HTML5使用window.history.pushState()实现路由的切换而不刷新页面. 第二种使用hash值的方式来实现. vue2.0两种都可 ...
- vue2.0路由
现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...
- vue2.0路由-路由嵌套
vue一个重要的方面就是路由,下面是自己写的一个路由的例子: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> ...
- vue2.0学习笔记之路由(二)路由嵌套+动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 织梦dedecms页面中增加二维码功能的实现方法
本文介绍了在dedecms中增加二维码功能的实现方法,有时需要在dedecms页面增加二维码,方便手机用户访问,有需要的朋友参考下. 本节内容: dedecms中增加二维码功能 1.打开/incl ...
- 使用Code First 迁移发布asp.net mvc 程序
通过Code First 迁移发布asp.net mvc应用程序,与在visual studio 程序包控制器管理台中运行Add-Migration ,Update-Database 一致. 在发布的 ...
- HDU 2077 汉诺塔IV (递推)
题意:... 析:由于能最后一个是特殊的,所以前n-1个都是不变的,只是减少了最后一个盘子的次数,所以根据上一个题的结论 答案就是dp[n-1] + 2. 上一题链接:http://www.cnblo ...
- bzoj 4530: [Bjoi2014]大融合【LCT】
新姿势,一般来讲LCT只能维护splay重边里的数据,而这里要求维护整颗子树的size 多维护一个sq表示当前点轻儿子的size和,si表示包括轻重边的整颗子树的大小 然后需要改sq的地方是link和 ...
- bzoj 4622: [NOI 2003] 智破连环阵【dfs+匈牙利算法】
一个炸弹炸一个区间的武器,想到二分图匹配 但是直接dfs断点显然不行,预处理出dis[i]为i到m的至多值来最优性剪枝,并且标记ok[i][j]为炸弹i可以炸到j武器,mx[i][j]为i炸弹从j武器 ...
- bzoj 1968: [Ahoi2005]COMMON 约数研究【枚举】
枚举约数,加上有这个约数的数个数 #include<iostream> #include<cstdio> using namespace std; const int N=10 ...
- P4692 [Ynoi2016]谁的梦
传送门 分别考虑每一种颜色对答案的贡献.每种颜色的贡献就是他出现的区间个数,那么可以用总区间减去不包含它的区间个数,把每一个序列里不包含它的区间个数加起来,然后不同序列用乘法原理计算即可 于是我辛辛苦 ...
- Django Views: Dynamic Content
世味年来薄似纱,谁令骑马客京华. 小楼一夜听春雨,深巷明朝卖杏花. 矮纸斜行闲作草,晴窗细乳戏分茶. 素衣莫起风尘叹,犹及清明可到家. Your Second View: Dynamic Conten ...
- 2019 年 Vue 学习路线图!
如果你是 Vue 开发新手,可能已经听过很多行话术语,比如单页面应用程序.异步组件.服务器端渲染,等等.你可能还听说过与 Vue 有关的一些工具和库,比如 Vuex.Webpack.Vue CLI 和 ...
- MYSQL性能调优与架构设计之select count(*)的思考
select count(*)的思考 原文:MYSQL性能调优与架构设计 举例: 这里我们就拿一个看上去很简单的功能来分析一下. 需求:一个论坛帖子总量的统计 附加要求:实时更新 在很多人看来,这 ...