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. (linux)likely和unlikely函数

      在Linux内核中likely和unlikely函数有两种(只能两者选一)实现方式,它们的实现原理稍有不同,但作用是相同的,下面将结合linux-2.6.38.8版本的内核代码来进行讲解. 1.对 ...

  2. bzoj2436: [Noi2011]Noi嘉年华

    我震惊了,我好菜,我是不是该退役(苦逼) 可以先看看代码里的注释 首先我们先考虑一下第一问好了真做起来也就这个能想想了 那么离散化时间是肯定的,看一手范围猜出是二维DP,那对于两个会场,一个放自变量, ...

  3. HDU1358 Period —— KMP 最小循环节

    题目链接:https://vjudge.net/problem/HDU-1358 Period Time Limit: 2000/1000 MS (Java/Others)    Memory Lim ...

  4. js操作创建和操作外部样式的例子

    兼容IE8及以上的IE浏览器1. [代码][HTML]代码 <!DOCTYPE html><html lang="en">    <head>  ...

  5. 【扬中集训 DAY4T3】holiday

    [题目链接] 点击打开链接 [算法] 建C棵线段树即可,注意要用前缀和优化 [代码] 这是标程 #include <bits/stdc++.h> using namespace std; ...

  6. 洛谷P3830 [SHOI2012]随机树——概率期望

    题目:https://www.luogu.org/problemnew/show/P3830 询问1:f[x]表示有x个叶节点的树的叶节点平均深度: 可以把被扩展的点的深度看做 f[x-1] ,于是两 ...

  7. rsync(二):inotify+rsync详细说明和sersync

    以下是rsync系列篇: inotify+rsync 如果要实现定时同步数据,可以在客户端将rsync加入定时任务,但是定时任务的同步时间粒度并不能达到实时同步的要求.在Linux kernel 2. ...

  8. 关于tensorflow中维度的问题

    一直对TF中tensor的reduce操作涉及的axis(reduction_indices)计算一知半解,这里系统总结一下,避免继续走弯路: 1.本质上来说,reduce_xxx都是降维操作,沿某个 ...

  9. liist不同遍历优缺点

    JAVA中循环删除list中元素的方法总结 印象中循环删除list中的元素使用for循环的方式是有问题的,但是可以使用增强的for循环,然后今天在使用时发现报错了,然后去科普了一下,再然后发现这是一个 ...

  10. 一文教您如何通过 Docker 快速搭建各种测试环境(Mysql, Redis, Elasticsearch, MongoDB) | 建议收藏

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...