Vue的前端路由
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的前端路由的更多相关文章
- Vue(三)之前端路由
01-前端路由 1.前端路由的实现原理 vue+vue-router 主要来做单页面应用(Single Page Application) 为什么我们要做单页面应用? (1)传统的开发方式 url改变 ...
- Vue 前端路由 vue-router
1.前端路由 后端路由:多页面,服务器端渲染好返回给浏览器. 前端路由:改变url不向服务器发送请求:前端可以监听url变化:前端可以解析url并执行相应操作. 前后端分离:后端只提供API来返回数据 ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- 循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理
在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图 ...
- Vue基础(五)---- 前端路由
基本结构: ◆ 1.路由的基本概念与原理 ◆ 2.vue-router的基本使用 ◆ 3.vue-router嵌套路由 ◆ 4.vue-router动态路由匹配 ◆ 5.vue-router命名路由 ...
- Vue&Element 前端应用开发之菜单和路由的关系
我们一般的应用系统,菜单是很多功能界面的入口,菜单为了更好体现功能点的设置,一般都是动态从数据库生成的,而且还需要根据用户角色的不同,过滤掉部分没有权限的菜单:在Vue&Element的纯前端 ...
- 四、vue前端路由(轻松入门vue)
轻松入门vue系列 Vue前端路由 七.Vue前端路由 1. 路由的基本概念与原理 后端路由 前端路由 实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用 基本使用 ...
- vue+axios 前端实现登录拦截(路由拦截、http拦截)
一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...
- 【转】vue+axios 前端实现登录拦截(路由拦截、http拦截)
一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...
随机推荐
- Python-logging模块的初级使用
这篇文章适合刚接触logging模块,想快速使用 并看到使用效果的童鞋.如果想全面的了解logging模块,请移步~ 直接上代码+注释 #1.导入模块logging import logging #2 ...
- mac系统下安装、启动、停止mongodb
mongodb是非关系型数据库,mysquel是关系型数据库,前者没有数据表这个说法,后者有 一. 下载nodejs,安装,一直到 node -v显示版本号,表示安装成功. 二. 本文主要讲解,安装包 ...
- 【转】VMWare vCenter 6.0安装配置
版权声明: 专注于"GIS+"前沿技术的研究与交流,将云计算技术.大数据技术.容器技术.物联网与GIS进行深度融合,探讨"GIS+"技术和行业解决方案:文章允许 ...
- 数据清理,预处理 pandas dataframe 操作技巧 总结
dsoft2 = data1.loc[(data1['程'] == "轻") | (data1['程'] == "中")]设置x下标plt.xticks(np. ...
- freemarker使用map替换字符串中的值demo2
package demo01; import java.io.IOException;import java.io.OutputStreamWriter;import java.io.StringWr ...
- python3使用465端口发送邮件来解决阿里云封闭25端口问题
import smtplibfrom email.mime.text import MIMETextfrom email.utils import formataddr #发件人邮箱账号my_send ...
- js:重复输出字符串中字符
复习了 重复输出一个字符串后, 重复输出一个字符串是 比如给定 str:abc num:3 要求输出 abcabcabc 文章链接:https://www.cnblogs.com/mobu/p/98 ...
- 布尔类型、操作符别名、C++函数、动态内存分配(new\delete)、引用(day02)
六 C++的布尔类型 bool类型是C++中基本类型,专门表示逻辑值:true/false bool在内存上占一个字节:1表示true,0表示false bool类型可以接收任意类型和表达式的结果,其 ...
- [luogu2317 HNOI2005] 星际贸易 (dp)
传送门 Solution 两个dp分开处理, 第一问什么都不考虑直接dp 第二问还有些疑惑,姑且先留坑 Code //By Menteur_Hxy #include <cstdio> #i ...
- [bzoj4487][Jsoi2015]染色_容斥原理
染色 bzoj-4487 Jsoi-2015 题目大意:给你一个n*m的方格图,在格子上染色.有c中颜色可以选择,也可以选择不染.求满足条件的方案数,使得:每一行每一列都至少有一个格子被染色,且所有的 ...