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实现路由的更多相关文章

  1. vue2.0配置路由

    配置路由之前,先检查vue版本,(案例适用vue2.0) 采用npm包的形式进行安装. 安装路由依赖:npm install vue-router(代码中,如果在一个模块化工程中使用它,必须要通过 V ...

  2. vue2.0:(五)、路由vue-router

    好的,接下来,我们来写路由.用的是vue2.0的路由. 步骤一:配置main.js import Vue from 'vue'; import App from './App'; import rou ...

  3. vue2.0 路由学习笔记

    昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...

  4. Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?(转)

    https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...

  5. vue2.0路由变化1

    路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...

  6. vue2.0路由进阶

    一.路由的模式 第一种用history方式实现,HTML5使用window.history.pushState()实现路由的切换而不刷新页面. 第二种使用hash值的方式来实现. vue2.0两种都可 ...

  7. vue2.0路由

    现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...

  8. vue2.0路由-路由嵌套

    vue一个重要的方面就是路由,下面是自己写的一个路由的例子: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> ...

  9. vue2.0学习笔记之路由(二)路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Silverlight中使用MVVM(4)

    Silverlight中使用MVVM(1)--基础 Silverlight中使用MVVM(2)—提高 Silverlight中使用MVVM(3)—进阶 Silverlight中使用MVVM(4)—演练 ...

  2. UVA-11054(扫描法)

    题意: n个等距村庄,每个村庄要么买酒要么卖酒,把k个单位的酒运到相邻村庄去需要k个单位的劳动力,问最少需要多少劳动力才能满足所有的村庄的要求; 思路: 上次做了一个环的,这个是直线的,就是一个大水题 ...

  3. GCD深入理解(1)

    写在前面 本文原文为raywenderlich的<grand-central-dispatch-in-depth-part-1>:顺便提及一下,笔者认为,对于iOS初学者而言,raywen ...

  4. javascript之数组的6种去重方法

    去重 var arr=[11,11,333,4,4,5,66,66,7]; // 方法一:在新数组内判断不存在时加入 var newarr1=[]; function quchong1(){ for( ...

  5. jmeter+jenkins+ant部署持续集成测试

    原文地址:http://blog.csdn.net/kaluman/article/details/74535495 开头的注意事项: 1.所有的环境变量和代码,都需要使用英文的符号,变量之间都需要英 ...

  6. webpack项目调试以及独立打包配置文件

    webpack项目调试 -sourcemap webpack配置提供了devtool这个选项,如果设置为 ‘#source-map’,则可以生成.map文件,在chrome浏览器中调试的时候可以显示源 ...

  7. JS两个数组比较,删除重复值巧妙方法

    //方法一 var arr1 = [1,2,3,4,5,6,7,8]; //数组A var arr2 = [1,2,3,11,12,13,14];//数组B var temp = []; //临时数组 ...

  8. POI2013 Bytecomputer

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3427 可以证明最终序列为-1...0....1 因为首先如果 a(i-1) 为-1或0,执行操 ...

  9. 015--python集合和字符串

    一.集合 关系测试 交集: 两个都有   .intersettion() 或用  &  符号 差集: 列表a有,列表b没有  .difference() 或用  -  符号 并集: 两列表合并 ...

  10. Codeforces - 909C - Python Indentation - 简单dp

    http://codeforces.com/problemset/problem/909/C 好像以前做过,但是当时没做出来,看了题解也不太懂. 一开始以为只有上面的for有了循环体,这里的state ...