vue-router-- 根据不同的地址找到不同的页面 

                                     (单页面应用:无需频繁的从后台刷新页面)

1,安装路由-->导入-->注册--->实例化-->Vue实例中声明此实例

2,路由 map(实例的vue-router配置) router-view (规定路由中的组件在哪显示)显示  router-link 跳转

  

    :to=""   动态绑定

 根目录下的apple

  基于当前路径的apple

   tag转换a为li标签 

                    当前路由会添加默认类名:router-link-active

3,路由参数(: 添加完参数后,必须完整的输入地址)

      

4,嵌套路由(chiidren的组件会渲染到父级(Apple)的vue文件的 router-view中)

 

5,命名的路由

  

  

6,编程似的导航:

  router.push({path: 'apple'})

router.beforEach()每次跳转前可写方法进行操作,比方说异步检查一下用户信息状态,符合条件再执行router.push({path: 'apple'})

7,路由重定向       

8,路由跳转动画 

Vuex 状态管理工具-数据中心维护一些数据通知(某些组件被改变状态后其他页面也会实时更新  登陆  购物车

   

安装vuex

1,npm install vuex --save

2,main.js引入 并注册vuex  

import Vuex from 'vuex'
Vue.use(Vuex);

 使用store

第一步,实例化store

let store=new Vuex.store({
state://存放数据{
totalPrice:0
},
mutations:{ //动作
increment(state,price){
state.totalPrice+=price
},
decrement(state,price){
state.totalPrice-=price
}},
actions:{ //只能调用mutations不能调用state
increase(context,price){ //context即是当前的store对象
context.commit('increment',price)
} } }); //实例化数据中心 (如果有actions则这样调用)
actions 和 mutations 的区别是,actions可以进行异步的请求,mutations进行同步的操作

2,第二步,Vue实例中声明

3,调用
******** 不同块级的数据放入到不同的mudule中的js中 (http://www.jb51.net/article/124618.htm)
http://blog.csdn.net/github_26672553/article/details/53389988
 

  所有的mutations中的函数中都传入了state参数

放在全局的实例化对象里
commit 调用 mutation
组件中调用actions this.$store.dispatch('increase',this.price) 

报错:Component template requires a root element, rather than just text.(每个组件至少有一个包裹的dom元素)

computed属性      https://www.cnblogs.com/freefish12/p/6046828.html

这是main.js代码:
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import App from './App.vue'
  import goods from './components/goods.vue'
  import ratings from './components/ratings.vue'
  import seller from './components/seller.vue'
  Vue.use(VueRouter)
  Vue.config.productionTip = false
  / eslint-disable no-new /
  var routes = [
  {path: '/goods', components: goods},
  {path: '/ratings', components: ratings},
  {path: '/seller', components: seller}
  ]
  var router = new VueRouter({
  routes
  })
  new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
  })

Vue的前端路由的更多相关文章

  1. Vue(三)之前端路由

    01-前端路由 1.前端路由的实现原理 vue+vue-router 主要来做单页面应用(Single Page Application) 为什么我们要做单页面应用? (1)传统的开发方式 url改变 ...

  2. Vue 前端路由 vue-router

    1.前端路由 后端路由:多页面,服务器端渲染好返回给浏览器. 前端路由:改变url不向服务器发送请求:前端可以监听url变化:前端可以解析url并执行相应操作. 前后端分离:后端只提供API来返回数据 ...

  3. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  4. 循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

    在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图 ...

  5. Vue基础(五)---- 前端路由

    基本结构: ◆ 1.路由的基本概念与原理 ◆ 2.vue-router的基本使用 ◆ 3.vue-router嵌套路由 ◆ 4.vue-router动态路由匹配 ◆ 5.vue-router命名路由 ...

  6. Vue&Element 前端应用开发之菜单和路由的关系

    我们一般的应用系统,菜单是很多功能界面的入口,菜单为了更好体现功能点的设置,一般都是动态从数据库生成的,而且还需要根据用户角色的不同,过滤掉部分没有权限的菜单:在Vue&Element的纯前端 ...

  7. 四、vue前端路由(轻松入门vue)

    轻松入门vue系列 Vue前端路由 七.Vue前端路由 1. 路由的基本概念与原理 后端路由 前端路由 实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用 基本使用 ...

  8. vue+axios 前端实现登录拦截(路由拦截、http拦截)

    一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...

  9. 【转】vue+axios 前端实现登录拦截(路由拦截、http拦截)

    一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...

随机推荐

  1. Python-logging模块的初级使用

    这篇文章适合刚接触logging模块,想快速使用 并看到使用效果的童鞋.如果想全面的了解logging模块,请移步~ 直接上代码+注释 #1.导入模块logging import logging #2 ...

  2. mac系统下安装、启动、停止mongodb

    mongodb是非关系型数据库,mysquel是关系型数据库,前者没有数据表这个说法,后者有 一. 下载nodejs,安装,一直到 node -v显示版本号,表示安装成功. 二. 本文主要讲解,安装包 ...

  3. 【转】VMWare vCenter 6.0安装配置

    版权声明: 专注于"GIS+"前沿技术的研究与交流,将云计算技术.大数据技术.容器技术.物联网与GIS进行深度融合,探讨"GIS+"技术和行业解决方案:文章允许 ...

  4. 数据清理,预处理 pandas dataframe 操作技巧 总结

    dsoft2 = data1.loc[(data1['程'] == "轻") | (data1['程'] == "中")]设置x下标plt.xticks(np. ...

  5. freemarker使用map替换字符串中的值demo2

    package demo01; import java.io.IOException;import java.io.OutputStreamWriter;import java.io.StringWr ...

  6. python3使用465端口发送邮件来解决阿里云封闭25端口问题

    import smtplibfrom email.mime.text import MIMETextfrom email.utils import formataddr #发件人邮箱账号my_send ...

  7. js:重复输出字符串中字符

    复习了 重复输出一个字符串后, 重复输出一个字符串是 比如给定 str:abc  num:3 要求输出 abcabcabc 文章链接:https://www.cnblogs.com/mobu/p/98 ...

  8. 布尔类型、操作符别名、C++函数、动态内存分配(new\delete)、引用(day02)

    六 C++的布尔类型 bool类型是C++中基本类型,专门表示逻辑值:true/false bool在内存上占一个字节:1表示true,0表示false bool类型可以接收任意类型和表达式的结果,其 ...

  9. [luogu2317 HNOI2005] 星际贸易 (dp)

    传送门 Solution 两个dp分开处理, 第一问什么都不考虑直接dp 第二问还有些疑惑,姑且先留坑 Code //By Menteur_Hxy #include <cstdio> #i ...

  10. [bzoj4487][Jsoi2015]染色_容斥原理

    染色 bzoj-4487 Jsoi-2015 题目大意:给你一个n*m的方格图,在格子上染色.有c中颜色可以选择,也可以选择不染.求满足条件的方案数,使得:每一行每一列都至少有一个格子被染色,且所有的 ...