路由配置项:
       import Router from ‘vue-router’
       
                 1、path:路径
                 2、component:路径正确时显示的组件
                 
       重定向:path    redirect 访问根目录的时候,匹配的路径
                          
       匹配所有,在最后,(路径不对时),path:‘**’   component:Home
                 学习地址:vue官网,vue router   https://router.vuejs.org/zh/
       路由跳转:
                 1、<a href="#/home">           不推荐
                 2、<router-link to="/home">  比a标签多一个router-link-active 的class属性
                 3、编程式导航:this.$router.push()
                 
                          
       路由嵌套:(尽量不要嵌套超过3层)
                 页面的子页面  出现详情页
                 index.js 中导入,在要嵌套的页面路径导入 children [] 里面的path不加/ ,
       命名路由:(6个)
                 path
                 component
                 children  如: children:[ { },{ }]  ,{ }里面写路由的参数
                 name : 路由的名字
                          解决当path路径太长的情况
                          将path换为name,如
                          footer 中 <router-link :to="{name:item.name}">
                          home 二级嵌套中 <router-link :to="{name:'homedetails'}">
                 redirect 重定向  如;redirect:'/home'
                 
       
       路由传值:find页面
                 根据不同路径返回不同页面,页面间传值,显示不同的组件
                 组件传值是组件之间有依赖
                 1、params  
                          在路由path中添加属性
                          path:'/details/:name/:id'  需提前定义!!!
                          find中 :
                          to="'/detail/' + item + '/'+ index"   (无大括号!!!)
                                    接收用this.$route.params
                                    当不传值时,路径匹配不上,path为** 返回首页
                          <router-link :to="{name:'homedetails',params:{ name:item,id:index}}">
                                    接收用
                        信息比较重要的时候使用,一般都用parms,的后一种方法!
                 2、query (最轻松)
                          path中不需要提前定义 path:'/details'
                          <router-link :to="{name:'homedetails,query:{ name:item,id:index}'}">
                                    接收用this.$route.query
                          
                 
                 3、路由解耦
                          当使用parms传值的时候,可以再路由的配置项中添加一个属性props:true,这样在接收路由参数的组件中,用props( props:['name','id'] )直接接收数据,而不用this.$router
                          原因:query传值中属性key值 name,id 等可以随意更换不固定,而params中name,id是固定的,所以路由解耦用parms
                 4、编程式导航,
                          传值时,传过来的值在$route 中
                          导航时,方法都在this.$router 中
                                    push 是跳转  详见下面
                                    back 是返回  this.$router.back() 即可
                                    forward 前进 ??
                                    replace 替换所有当前路径(前进后退不能使用,因为之前的记录全部销毁),需要参数,如:this.$router.replace('/find')
                                    go()
                                    -1 后退 ; 0 刷新 ; 1 前进 ; (均表示页数)                
                          
                          li循环,添加@click,methods中调用方法,方法内容为
                          //如果params传值,不能使用path,用name 传值
                          this.$router.push({ name:'details',params:{ name:item,id:index } })
                          //如果用query传值,path 和 name 均可。注意index.js 中的路径
                          this.$router.push({ path:'details',params:{ name:item,id:index } })
                                                       path 后加 / 吗???
                          this.$router.push({ name:'details',params:{ name:item,id:index } })

vue中的路由的更多相关文章

  1. vue中的路由的跳转的参数

    vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...

  2. vue中的路由独享守卫的理解

    1.vue中路由独享守卫意思就是对这个路由有一个单独的守卫,因为他的守卫方式于其他的凡是不太同 独享守卫于前置守卫使用方法大致是一样的 在路由配置的时候进行配置, { path:'/login', c ...

  3. vue 中的路由为什么 采用 hash 路由模式,而不是href超链接模式(Hypertext,Reference)?

    1. vue中路由模式的种类有两种 1. 一种是 hash 模式. 2. 一种是 h5 的 history 模式. 2. hash 和 history 都是来自 bom 对象 bom 来自 windo ...

  4. Vue中的路由 以及默认路由跳转

    https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...

  5. 5分钟学会vue中的路由守卫(导航守卫)

    在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断. vue-router提供了导航钩子:全局前置导航钩子 beforeEa ...

  6. VUE中嵌套路由

    官网地址:https://router.vuejs.org/zh-cn/essentials/nested-routes.html 路由嵌套一般使用在后台管理系统中 给一个比较简单的小案例 <! ...

  7. vue中通过路由跳转的三种方式

    原文:https://blog.csdn.net/qq_40072782/article/details/82533477 router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要 ...

  8. Vue中解决路由切换,页面不更新的实用方法

    前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页 ...

  9. vue中的路由传参及跨组件传参

    路由跳转   this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...

随机推荐

  1. python,day3,函数基础-3

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 1.函数基本语法及特性 函数是什么? 函数一词 ...

  2. Nginx 修改用户权限

    [1]Nginx 修改用户权限 (1)修改前:Nginx系统默认用户权限是nobody 查看可知: (2)修改方法 欲使用root权限启动的. 修改 /usr/local/nginx/conf/ 下n ...

  3. laravel-admin 上传图片过程中遇到的问题

    1. 报错 Disk [admin] not configured, please add a disk config in `config/filesystems.php`. 在config/fil ...

  4. 接触node第一步

    趁着工作不忙,今天来系统记录一下安装node环境: 1.node下载地址为:https://nodejs.org/en/,检查是否安装成功:如果输出版本号,说明我们安装node环境成功:node -v ...

  5. ready

    // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = functio ...

  6. No Directionality widget found.错误记录。

    import 'package:flutter/material.dart'; void main() => runApp(new Center(child: new Text('Hello, ...

  7. vscode下运行matlab记录

    Linux下安装MATLAB可参照以下链接: https://blog.csdn.net/qq_31285709/article/details/82083902 在vscode 中运行.m文件. 首 ...

  8. Apache 配置多个端口多站点(Linux)

    for apache2 configuration: by default, apache is configured 80 port for the default web site. follow ...

  9. 肿瘤数据库除了TCGA,还有TCIA--转载

    TCIA就是基于TCGA数据开发的,不同的是TCIA只提供了20个癌种的免疫数据分析. 看网站首页的介绍就知道,这个数据库主要是根据TCGA的二代测序数据开发出来的.这里的20个癌种,点击每个柱子进去 ...

  10. CentOS7 DHCP 服务搭建

    一.实验环境 1.VMware12.俩台Linux(Ser  和  Client ).DHCP安装包. 二.操作流程 1.安装DHCP 2.配置DHCP的配置文件:  /etc/dhcp/dhcpd. ...