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 部分
这样就会三种都显示啦
vue 学习笔记—路由篇的更多相关文章
- vue学习笔记——路由
1 路由配置 在vue.config中配置,则在代码中可以使用 @来表示src目录下 import aa from '@/aa/index.js' 2 单页面可以懒加载 3 创建动态路由 路由中定义: ...
- Vue学习笔记进阶篇——Render函数
基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- vue学习笔记(四)事件处理器
前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
随机推荐
- macs安卓工程创建
第一个 1.创建工程后先修改xml文件. 然后主程序中编写代码. center :如果图片比imageview大则显示中片中心部分 image大小 把view填满 匹配父控件 ,父控件多大它就多大. ...
- (链表 双指针) leetcode 160. Intersection of Two Linked Lists
Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...
- 25 个常用的 Linux iptables 规则
# 1. 删除所有现有规则 iptables -F # 2. 设置默认的 chain 策略 iptables -P INPUT DROP iptables -P FORWARD DROP ipta ...
- 「Python」6种python中执行shell命令方法
用Python调用Shell命令有如下几种方式: 第一种: os.system("The command you want"). 这个调用相当直接,且是同步进行的,程序需要阻塞并等 ...
- OS + Windows 10 / office excel vlookup / CredSSP
s https://support.microsoft.com/zh-cn/help/10749/windows-10-find-product-key 查找 Windows 7 或 Windows ...
- Matlab2017A破解版安装详细图文教程(附破解补丁) 64位
摘录网址:http://www.jb51.net/softjc/543170.html MATLAB2017a安装教程: 1.下载并解压本站提供的MATLAB2017a破解版安装包,载入右键解压或者使 ...
- Linux记录-linux系统监控命令汇总
命令 功能应用 用法举例 free 查看内存使用情况,包括物理内存和虚拟内存 free -h或free -m vmstat 对系统的整体情况进行统计,包括内核进程.虚拟内存.磁盘.陷阱 ...
- minio golang client使用
初始化 var ( endpoint = "127.0.0.1:8888" accessKeyID = "YXU5IXETKKPX171K4Z6O" secre ...
- Python绘制wav文件音频图(静态)[matplotlib/wave]
#!/usr/bin/env python # -*- coding: utf-8 -*- """ 绘制波形图 plottingWaveform.py "&qu ...
- tmux用法【常用】
类似各种平铺式窗口管理器,tmux使用键盘操作,常用快捷键包括: Ctrl+b 激活控制台:此时以下按键生效 系统操作 ? 列出所有快捷键:按q返回 d 脱离当前会话:这样可以暂时返回Shell界面, ...