vue 学习笔记—路由篇
一.关于三种路由
动态路由
就是path:good/:ops 这种 用 $route.params接收
<router-link>是用来跳转 <router-view></router-view>用来盛放内容的容易
在routes 里面进行配置 [{ path:'',name:'',component:''}] path为router-link的路径 component为 import Img from '@/Goodlist/Img' 引入的组件名称
<router-link to="cart">跳转1</router-link> // 通过path跳转
<router-link :to="{name:cart}">跳转1</router-link> //通过name来跳转 但是to需要绑定(属性那边是个对象)
扩展 : <router-link :to="{name:'cart',params:{cartId:123}}">跳转1</router-link> 然后path里面也要配置path:'/cart/:cartId', 才能出现123 并传过去
嵌套路由
路由里面套路由
routes: [
{
/ /path: '/goods/:goos',
path:'/goods',
name: 'Goodlist',
component: Goodlist,
children:[
{
path:'title',
name:'title',
component:Tile
},{
path:'img',
name:'img',
component:Img
}
],
},{
path:'/cart/:cartId',
name:'cart',
component:Cart
}
]
编程式路由 通过js来实现页面的跳转 后面加参数 用$route.query来接收
//两种跳转方式(标签不能用 router-link 不然不显示)
//this.$router.push('cart');
//this.$router.push({path:'cart'});
// 传参
this.$router.push({path:'/cart?goodId=123'}); $route.query 接收123
this.$router.go(1); //就是history(1)
总结: 跟path后面传过的参数 {{$route.params}} 来接收参数
js控制的参数 {{$route.query.goodId}}来接收参数
二. 路由命名
js 部分
这样就会三种都显示啦
转载于:https://www.cnblogs.com/tansitong/p/7324267.html
vue 学习笔记—路由篇相关推荐
- Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
- Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
- Vue学习笔记进阶篇——多元素及多组件过渡
本文为转载,原文:Vue学习笔记进阶篇--多元素及多组件过渡 多元素的过渡 对于原生标签可以使用 v-if/v-else.但是有一点需要注意: 当有相同标签名的元素切换时,需要通过 key 特性设置唯 ...
- vue-resource post php,Vue学习笔记进阶篇——vue-resource安装及使用
简介 vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到 ...
- vue学习笔记——路由
1 路由配置 在vue.config中配置,则在代码中可以使用 @来表示src目录下 import aa from '@/aa/index.js' 2 单页面可以懒加载 3 创建动态路由 路由中定义: ...
- Vue学习笔记(四)—— 前端路由
介绍 本文主要介绍路由的相关知识,当然主要是以Vue的路由为主要介绍对象. 有兴趣的朋友可以看看之前的文章: Vue学习笔记(一)-- 常用特性 Vue学习笔记(二)-- 组件开发 Vue学习笔记(三 ...
- Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础 一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
- vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈)
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习 文章目录 vue学习笔记-01-前端的发展历 ...
- Vue学习笔记(三) —— 前后端交互
简介 本文主要是为了介绍前端交互的相关知识,而严格来讲,这也不算是Vue的专属知识,但是却是必须要指定的.本文开始简单说了ajax.jquery 的方式,但是随着SPA开发模式的大火,相继出现了一些新 ...
最新文章
- 用deepfake拍电影可以安排了:迪士尼发布首个百万像素高分辨率换脸算法
- 图像处理-PCA人脸识别
- 一次mysql数据库连接池泄露的解决经历
- 图像识别中距离变换的原理及作用详解,并附用OpenCV中的distanceTransform实现距离变换的代码
- oracle的function的语法,Oracle function语法
- signature=18441de5a4bb8df92eb5cf5dcca47d1e,Heroísmo y los medios de comunicación (Capítulo 5A 5B)...
- 使用cocoapods导入第三方类库后 头文件没有代码提示?
- spring中怎么访问MySQL过程_DB数据源之SpringBoot+MyBatis踏坑过程(六)mysql中查看连接,配置连接数量...
- @程序员,Python 这次彻底上位了!
- yolo和mrcnn目标检测
- React-flux杂记
- 正则校验日期,不考虑闰年和闰月
- JS--微信浏览器复制到剪贴板实现
- android 打印机 万能驱动,打印机驱动,万能打印机驱动下载,驱动程序_万能驱动下载...
- html 输出helloworld,以及基本结构详解
- mkv格式怎么转换成mp4?
- 如何在php网站上插入站长统计,如何为自己的Wordpress网站添加站长统计代码 | 泰泰博客...
- App推广统计代替渠道包统计的方法
- android 微信高仿,Android 高仿微信发朋友圈浏览图片效果(转)
- 李沐华:变革前夜的券商集中交易系统
热门文章
- OpenCV_08 边缘检测:Sobel检测算子+Laplacian算子+Canny边缘检测
- python dataframe 列_python pandas库中DataFrame对行和列的操作实例讲解
- excel记账本模板_原来这才是老板最喜欢看的财务报表!这些模板送你,录入自动生成...
- ES6(三)——Set、WeakSet、Map、WeakMap
- LeetCode 129. 求根到叶子节点数字之和(DFS)
- LeetCode 240. 搜索二维矩阵 II(二分查找 分治)
- LeetCode 33. 搜索旋转排序数组(二分查找)
- 苹果11怎么录屏_苹果11怎么设置骚扰电话号码
- (十九)【AAAI2021】Knowledge-Enhanced Hierarchical Graph Transformer Network for Multi-Behavior Recommend
- 打破情感分类准确率 80 分天花板!更加充分的知识图谱结合范式