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. sdut oj 1510 Contest02-4 Spiral

    Contest02-4 Spiral Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 Given an odd number n, ...

  2. vi编辑器设置行号可见

    vi 设置行号 需要切换到命令模式下,输入set number :set number 按下回车即可

  3. poj 1469 COURSES 解题报告

    题目链接:http://poj.org/problem?id=1469 题目意思:有 N 个人,P个课程,每一个课程有一些学生参加(0个.1个或多个参加).问 能否使得 P 个课程 恰好与 P 个学生 ...

  4. Apache Maven的下载、安装、测试

    Apache Maven是个软件项目管理工具,基于项目对象模型(Project Object Model,POM)的概念,Maven可用来管理项目的依赖.编译.文档等信息. 使用Maven管理项目时, ...

  5. [Selenium] 应对使用 Internet Explorer Driver 多个实例时的 cookie 共享问题

    在使用 IEDriverServer 可执行文件时,从理论上来说是可通过它来创建并使用多个同时存在的 Internet Explorer Driver 实例的.但在实际使用过程中,总是会碰到与 coo ...

  6. BZOJ_1916_[Usaco2010 Open]冲浪_分层图+拓扑排序+DP

    BZOJ_1916_[Usaco2010 Open]冲浪_分层图+拓扑排序+DP Description 受到秘鲁的马丘比丘的新式水上乐园的启发,Farmer John决定也为奶牛们建 一个水上乐园. ...

  7. py-day15_css+js_初

    css+js_初 一.鼠标移动变色 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. 6-12 SVM小结

    介绍了SVM的概念以及如何利用SVM进行一个身高体重的训练和预测.如果类别比较简单的话,那么在二维空间上它有可能就是一条直线.如果类别比较复杂,那么投影到高维空间上它就是一个超平面.所以SVM的本质它 ...

  9. linux mplayer 播放yuv格式 (转载)

    转自:http://blog.csdn.net/ly0303521/article/details/38713791 在mplayer中查看YUV格式的图片或视频,可使用如下命令: mplayer - ...

  10. Jmeter逻辑控制器操作,附栗子

    jmeter中的逻辑控制器确定采样器的执行顺序.右键线程组-->添加-->逻辑控制器. 一.简单控制器 简单控制器对JMeter如何处理添加到其中的采样器没有影响.只是方便我们做分组命名. ...