一.关于三种路由

动态路由

 就是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 学习笔记—路由篇的更多相关文章

  1. vue学习笔记——路由

    1 路由配置 在vue.config中配置,则在代码中可以使用 @来表示src目录下 import aa from '@/aa/index.js' 2 单页面可以懒加载 3 创建动态路由 路由中定义: ...

  2. Vue学习笔记进阶篇——Render函数

    基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template ...

  3. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  4. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  5. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  6. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  7. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  8. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

  9. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

随机推荐

  1. 原生JS正则实现trim()

    Jquery中封装有trim() 原生需要自己实现,我们可以用原型的方式自己封装trim()方法,实现去掉前后空格.前空格.后空格...所以不必抱怨,简单又灵活,这才是强大的JS的特色 String. ...

  2. cmd代码:查端口占用,查进程号,杀进程

    @echo off :main cls ::|findstr "8080" ::查找进程占用tasklist|findstr "XXXX" ::杀进程taskk ...

  3. Python入门介绍

    Python入门介绍(人生苦短,我用 Python) Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹 ...

  4. TensorFlow入门学习(让机器/算法帮助我们作出选择)

    catalogue . 个人理解 . 基本使用 . MNIST(multiclass classification)入门 . 深入MNIST . 卷积神经网络:CIFAR- 数据集分类 . 单词的向量 ...

  5. centos 7.4 安装gitlab

    centos 7.4 安装gitlab #curl -s https://packages.gitlab.com/install/repositories/gitlab/gitlab-ce/scrip ...

  6. struct sock注释

    针对 struct sock 的一些注释: struct sock { /* Socket demultiplex comparisons on incoming packets. */ __u32  ...

  7. C#设计模式(5)——建造者模式

    1.建造者模式介绍 在软件开发中,有时我们要创建一个复杂的对象,这个对象由几个子部件按一定的步骤组合而成,这时候我们就可以使用建造者模式了.说到建造者我们首先想到的是盖房子,盖房子简单的说有三个步骤: ...

  8. jQuery获取相同元素下标

    如题:经常搞混淆,index()获取的是下标,而eq(下标值)获取的是元素对象 var list=$(".toos");//获取class为toos的元素集合$('.toos'). ...

  9. hdu 5179 beautiful number(数位dp)

    原题链接 题意:求[l,r]中高位%低位等于0的数字个数.(不含0)分析:此题有三种方法.1.暴搜,毕竟最多才10个位.2.数位dp,预处理好整体的,再处理细节. dp[i][j]表示第i位上的数字位 ...

  10. PHP7 网络编程(六)Socket和IO多路复用【待】

    https://blog.csdn.net/zhang197093/article/details/77366407