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 ...
随机推荐
- js中的关系操作符
1.关于“小于(<)” a.关于数值的判断就是跟正常的比较一样: b.var result = “23” <"3" ; //true 这两个是字符串,会比较他们的编码 ...
- html5--6-2 CSS语法
html5--6-2 CSS语法 实例 学习要点 掌握引入外部样式表方法 插入样式的三种方法 内联样式表(行内) 内部样式表(style中) 外部样式表 创建一个外部样式表 在head中使用link元 ...
- 修改fuse库成功
使用的是fuse-2.9.2 在lib目录下的helper.c的fuse_main_real函数里打印一句话,然后将fuse库编译并install. 对ssfs进行编译,运行后,出现了打印的那句话! ...
- position属性中的绝对定位和相对定位
absolute(绝对定位):1.如果没有父级DIV,则会根据浏览器原始点去定位,而且跟他相邻的DIV会忽略它,定位后则可用TRBL(top,right,bottom,left)去布局.注意:TRBL ...
- codeforces 696B B. Puzzles(树形dp+概率)
题目链接: B. Puzzles time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- CALayer和UIView
前言 本次分享将从以下方面进行展开: 曾被面试官问倒过的问题:层与视图的关系 CALayer类介绍及层与视图的关系 CAShapeLayer类介绍 UIBezierPath贝塞尔曲线讲解 CoreAn ...
- BZOJ_4311_向量_线段树按时间分治
BZOJ_4311_向量_CDQ分治+线段树按时间分治 Description 你要维护一个向量集合,支持以下操作: 1.插入一个向量(x,y) 2.删除插入的第i个向量 3.查询当前集合与(x,y) ...
- Mother's Milk
链接 分析:我们用vis[i][j][k]来记录A,B,C三个状态是否被访问过,同时用s[i]来记录C的所有可能值,当i==0时,如果j合法,则标记s[k]=1,最后统计所有为1的s即可 /* PRO ...
- Laravel配置nginx环境
前言: 之前坑的!一直在尝试配置,但都失败了,只能用着apache,但是最近想整合swoole到laravel,无奈当前测试服务器是nginx,我只能再尝试在nginx上搭laravel环境 方法如下 ...
- windows8如何显示开始菜单
按键盘上的Win+R 运行,输入regedit打开注册表 2 在注册表中找到HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Ex ...