路由:vue-router
路由:vue-router
1)name使用
路由配置
import Main from './views/Main'routes: [ { path: '/main', name: 'main', component: Main }]
视图使用
<router-link :to="{name: 'main'}">主页</router-link>
2)router-link与系统a标签的区别
router-link:会被vue渲染成a标签,但是点击这样的a标签不能发生页面的转跳,只会出现组件的替换a:也可以完成同样的效果,但是会发生页面的转跳
3)路由重定向
routes: [ { path: '/', name: 'home', component: Home }, { path: '/home', redirect: '/', // 重定向 }]
4)路由传参-1
路由:router.js
{ // path如果是通过to直接访问,路由必须完全对应 // :id代表可以完成任意内容匹配,用变量id保存 // 请求/course/detail/1 和 /course/detail/abc,id变量分别存的1和abc // path: '/course/detail/1', // 死的 path: '/course/detail/:id', // 活的 name: 'course-detail', component: CourseDetail}
转跳页面:Course.vue
<template> <div class="course"> <h1>课程</h1> <hr> <ul> <li v-for="course in courses" :key="course.title"> <router-link :to="'/course/detail/' + course.id">{{ course.title }}</router-link> </li> </ul> </div></template><script> let course_list = [ { id: 1, title: '水浒传' }, { id: 2, title: '西游记' }, { id: 3, title: '哪吒' }, ]; export default { name: "Course", data () { return { courses: [] } }, // 组件创建成功去获取数据 created () { this.courses = course_list }, }</script><style scoped> li a { display: block; } li, li a { border: 1px solid pink; background-color: rgba(123, 21, 56, 0.3); margin-top: 10px; line-height: 80px; cursor: pointer; }</style>
渲染页面:CourseDetail.vue
<template> <div class="course-detail"> <h1>课程详情</h1> <hr> <h2>{{ ctx }}</h2> </div></template><script> let course_detail_list = [ '数据有误', '水浒传', '西游记', '哪吒' ]; export default { name: "CourseDetail", data () { return { ctx: '' } }, created () { console.log('详情页面被渲染了'); // this.$route:负责路由的数据 // this.$router:负责路由的路径 // this.$route.params可以拿到链接中 :变量 变量中的数据 let index = this.$route.params.id; if (index < 0 || index >= course_detail_list.length) index = 0; this.ctx = course_detail_list[index] } }</script><style scoped></style>
4)路由传参-2
路由:router.js
{ path: '/course/detail', name: 'course-detail', component: CourseDetail}
转跳页面:Course.vue
<router-link :to="'/course/detail?id=' + course.id">{{ course.title }}</router-link>
渲染页面:CourseDetail.vue
created () { let index = this.$route.query.id; if (index < 0 || index >= course_detail_list.length) index = 0; this.ctx = course_detail_list[index]}
5)路由传参-3
路由:router.js
{ path: '/course/detail', name: 'course-detail', component: CourseDetail}
转跳页面:Course.vue
methods: { 转跳的方法 (参数) { this.$router.push({ name: 'course-detail', params 或者 query: { 参数们 }, : { 参数们 } }) }}
渲染页面:CourseDetail.vue
created () { let 参数的数据 = this.$route.query.参数的key 或者 this.$route.params.参数的key}
6)go
this.$router.go(-1) //返回历史记录的前一页
仓库:vuex
仓库配置:store.js
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);export default new Vuex.Store({ // 全局可以访问的变量 - 获取值 // 组件内:this.$store.state.title state: { title: '主页' }, // 全局可以访问的方法 - 修改值 // 组件内:this.$store.commit('updateTitle', '新值') mutations: { updateTitle (state, newValue) { state.title = newValue } }, actions: {}})
前后台交互:axios
安装
>: cd 项目目录>: cnpm install axios --save
配置:main.js
import Axios from 'axios'Vue.prototype.$axios = Axios;
跨域问题(同源策略):Access-Control-Allow-Origin => CORS
前提:前台向后跳请求数据1)服务器不一致 - ip2)应用不一致 - 端口3)协议不一致 - http <-> https
django解决跨域
'''1)安装django-cors-headers模块2)在settings.py中配置# 注册appINSTALLED_APPS = [ ... 'corsheaders']3)添加中间件MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware']4)允许跨域源CORS_ORIGIN_ALLOW_ALL = True'''
axios请求方式
get
this.$axios({ url: 'http://localhost:8000/test/data/', method: 'get', params: { usr: 'zero', pwd: '000' }}).then((response) => { console.log(response.data)}).error((error) => { console.log(error)});this.$axios.get('http://localhost:8000/test/data/', { params: { usr: 'zero', pwd: '000' }}).then((response) => { console.log(response.data)}).error((error) => { console.log(error)});
post
this.$axios({ url: 'http://localhost:8000/test/data/', method: 'post', data: { username: 'owen', password: '123' }}).then((response) => { console.log(response.data)}).error((error) => { console.log(error)});this.$axios.post('http://localhost:8000/test/data/', { username: 'owen', password: '123', headers: { 'Content-Type': 'urlencoded' }}).then((response) => { console.log(response.data)}).error((error) => { console.log(error)});
前台操作Cookie:vue-cookie
安装
>: cd 项目目录>: cnpm install vue-cookie --save
配置:main.js
import cookie from 'vue-cookie'Vue.prototype.$cookie = cookie;
使用:在任何方法中
// token是后台返回的// 设置cookie// this.$cookie.set(key, value, time)this.$cookie.set('token', token, 1);// 取出cookie// this.$cookie.get(key)console.log(this.$cookie.get('token'));// 删除cookie// this.$cookie.delete(key)this.$cookie.delete('token');
转载于:https://www.cnblogs.com/HZLS/p/11348668.html
路由:vue-router相关推荐
- Vue学习笔记(六)--- 前端路由 Vue Router
一.路由 1.概念 路由本质上来说就是一种对应关系,比如说我们在浏览器中输入不同的 url 地址,我们就能访问不同的资源,那么这 url 地址与资源之间的对应关系,就是路由. 2.分类 ① 后端路 ...
- VUE探索第三篇-路由(vue router)
一.vue router介绍 Vue Router是Vue.js官方的路由器,页面间的跳转(比如A->B->C)是一组路由,而Vue Router是管理这些路由的集成器.Vue Route ...
- vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析 一.Vue.js实例 在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...
- (50)Vue Router插件介绍
一.Vue Router插件介绍 Vue Router 是 Vue.js 的官方插件,用来快速实现单页应用. 二.Vue Router学习内容 • 单页应用 • 前端路由 • Vue Router 三 ...
- Vue2.x - Vue Router
目录 Vue与SPA 什么是SPA 简单了解SPA 什么是MPA SPA相较于MPA的优点 实现SPA的几个关键点 理解SPA单页面架构 什么是前端路由 锚链接与URL中的hash值 通过hashch ...
- vue router children 路由变了 组件没变_Vue.js从零开始——路由(2)
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...
- vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
- Vue中路由管理器Vue Router使用介绍(三)
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 {path:'/user/:id/:name', ...
- 已解决vue-router4路由报“[Vue Router warn]: No match found for location with path“
vue-router4动态加载的模式下,当我们在当前页面刷新浏览器时,会出现一个警告 [Vue Router warn]: No match found for location with path ...
- Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战 前言 一.什么是单页面应用及实现前端路 ...
最新文章
- OpenStack OVS实现安全组(五)
- 为什么要加上拉电阻和下拉电阻
- LeetCode 222. 完全二叉树的节点个数(二分查找)
- 2020年中国保险中介市场生态白皮书
- windows版一键绕id工具_【实用工具】一键关闭/开启Windows防火墙、禁止更新系统...
- HTML5的 2D SVG和SVG DOM的学习笔记(2)---SVG动画
- 右手残疾学计算机学什么专业好,我是右手和右脚残疾 左手和左脚好的 可以学残疾人驾照吗...
- java 读取mysql数据库_原生Java操作mysql数据库过程解析
- jdk list接口源码解析
- python设置路径变量_python – Bokeh中设置的静态路径变量在哪里(对于create_html_snippet)...
- 查看手机db数据库文件
- 华为hcna认证考完多久考hcip?华为认证的发展就业前景怎么样?
- 简单理解聚集索引和非聚集索引
- linux中括号 美元符号怎么打,键盘输入美元符号
- 机器人php接口,小I机器人接口[PHP版本 08.12.7]
- Linux下串口编程总结
- python123用户登录c_写代码: 实现用户输入用户名和密码,当用户名为seven且密码为123时,显示登录成功,否则登录失败。...
- 过滤器(7)_过滤器处理 POST 请求乱码
- 【技术网站分享】全面整理了一波技术网站,分享给大家!
- 酷睿i7和i5对计算机专业要求,酷睿i7,教您酷睿i7和i5有什么区别
热门文章
- IpV6 linux RedHat5
- ScreenFlow for mac(屏幕录像软件)
- Mac电脑上的Safari运行缓慢,卡的要死,该怎么解决?
- Keka创建压缩文件时,总是询问每一次文件名的解决方法
- JQuery时间轴timeline插件的学习-Lateral On-Scroll Sliding with jQuery+technotarek / timeliner
- 深度剖析Spring Cloud底层原理
- swift3.0 coreData的基本使用,简单实现增删改查
- 9.3 客户端接收响应信息(异步转同步的实现)
- Redis学习笔记3-Redis5个可运行程序命令的使用
- linux用户和组2