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 ... 
随机推荐
- POJ3074 Sudoku —— Dancing Links 精确覆盖
			题目链接:http://poj.org/problem?id=3074 Sudoku Time Limit: 1000MS Memory Limit: 65536K Total Submissio ... 
- HDU3567 Eight II —— IDA*算法
			题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3567 Eight II Time Limit: 4000/2000 MS (Java/Others) ... 
- linux初级学习笔记九:linux I/O管理,重定向及管道!(视频序号:04_3)
			本节学习的命令:tr,tee,wc 本节学习的技能: 计算机的组成 I/O管理及重定向 管道的使用 知识点九:管理及IO重定向(4_3) 计算机组成: 运算器.控制器: CPU 存储器:RAM ... 
- SPFA 最短路 带负权边的----  粗了解
			SPFA(Shortest Path Faster Algorithm)是Bellman-Ford算法的一种队列实现,减少了不必要的冗余计算. 算法大致流程是用一个队列来进行维护. 初始时将源加入队列 ... 
- 在Service里调用AlertDialog
			用常规的方法在AlertDialog的时候,会报错,大意是「can not add window in this view」. 原因是Service是没有界面的,只有Activity才能添加界面. 解 ... 
- 使用masonry手写约束
			在iOS开发过程中,手写contraints是非常痛苦的一件事情,往往那么一丢丢功能要写大量的代码,非常容易发生错误,并且非常不方便调试.所以只有在不得以的情况下才采用手工方式写contraints, ... 
- 多线程-threading模块
			#coding:utf-8 import threading from time import sleep,ctime #音乐播放器 def music(func): for i in range(2 ... 
- 文件的创建,读取,写入,修改,删除---python入门
			转自:http://blog.163.com/jackylau_v/blog/static/175754040201181505158356/ 一.用Python创建一个新文件,内容是从0到9的整数, ... 
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 07. View的Model 和 Tag Helpers
			student添加一个属性BirthDate 然后把生成数据的地方,字段也加上 建立ViewModel list转换为ViewModel 进一步改进代码 StudentViewModel HomeIn ... 
- 任务43:Identity MVC:UI
			基于原来做的cookie认证的代码:MvcCookieAuthSample 增加登陆和退出的方法: 增加Login和SignIn这两个Action方法. 在Views下面创建Account文件夹,然后 ... 
