【4858美高梅】push参数获取格局,MongoDB全栈系统学习

By admin in 4858美高梅 on 2019年3月28日

行使了vue-cli 生成了一套webpack的模板。

接纳了vue-cli 生成了一套webpack的模板。

咋样是前端路由?

 路由是根据不同的url地址展示不同的内容或页面
 前端路由就是把不同路由对应不同的内容或者页面的任务交给前端来做,之前是通过服务器根据url的不同返回不同的页面

传递参数的法门:

然后在内部演练 vue-router。

自此在中间演练 vue-router。

4858美高梅 ,怎么时候使用

 单页面应用程序,大部分页面结构不变,变动部分结构

1.Params

以下是一些记录。

以下是有个别笔录。

优点与缺点

 优点:用户体验好,不需要每次从服务器全部获取,快速展示给用户
 缺点:不利于SEO,
           使用浏览器的前进,后退会重新发送请求,没有合理利用缓存
           单页面无法记住之前的滚动位置,无法在前进后退是定到之前对应的位置
           首次加载缓慢

vue-router用来创设SPA 单页Web应用(single page web application,SPA)
<router-link></router-link>跳到钦赐的路由 (类似于a标签)
或许this.$router.push({path:”}) //通过代码情势进行页面调整
<router-view></router-view> 指令渲染

出于动态路由也是传递params的,所以在 this.$router.push()
方法中path无法和params一起行使,不然params将于事无补。须要用name来钦命页面。

 

 

动态路由相当

4858美高梅 1

【4858美高梅】push参数获取格局,MongoDB全栈系统学习。image.png

4858美高梅 2

image.png

:goodsId :name 就是动态输入值 访问如下
http://localhost:8080/\#/goods/23424/user/shasha
能够在页面展现路由内容 主语那里是route 不是 router

4858美高梅 3

image.png

及经过路由配置的name属性访问

1.动态路由的配置

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// import Hello from '@/components/hello'
import Goodslist from '@/views/Goodslist'

Vue.use(Router)

export default new Router({
  // 路由模式 history,hash
  mode:'history'
  routes: [
    {
      path: '/goods/:goodsId/user/:name',
      name: 'Goodslist',
      component: Goodslist
    }
  ]
})

<!-- vue -->
<!-- vue-router其实是对history的封装 -->
<template>
    <div>
        这是商品列表
        <!-- 获取参数 -->
        <p>{{$route.params.goodsId}}</p>
           <p>{{$route.params.name}}</p>
    </div>
</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

 

走访格局:history是带着地方访问,hash则是用#来访问

4858美高梅 4

 

 

1.动态路由的布局

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// import Hello from '@/components/hello'
import Goodslist from '@/views/Goodslist'

Vue.use(Router)

export default new Router({
  // 路由模式 history,hash
  mode:'history'
  routes: [
    {
      path: '/goods/:goodsId/user/:name',
      name: 'Goodslist',
      component: Goodslist
    }
  ]
})

<!-- vue -->
<!-- vue-router其实是对history的封装 -->
<template>
    <div>
        这是商品列表
        <!-- 获取参数 -->
        <p>{{$route.params.goodsId}}</p>
           <p>{{$route.params.name}}</p>
    </div>
</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

 

访问格局:history是带着地点访问,hash则是用#来访问

4858美高梅 5

 

 

嵌套路由

路由里面嵌套路由,使用状态 左边菜单 左边内容体现
路由配置子路由

4858美高梅 6

image.png

页面使用

4858美高梅 7

image.png

在路由安顿文件中定义参数:

2.嵌套路由

  使用情况,菜单。

<!-- Goodslist.vue -->
<!-- vue-router其实是对history的封装 -->
<template>
    <div>
        这是商品列表      


        <br>
        <!-- router-link 和 router-view 分别是两个封装好了的标签 
             在使用嵌套路由的时候,我们需要在goods路由下 来设置 router-view来承载余下的两个页面
             router-link 是 对a标签的封装 作用就是跳转
        -->
        <router-link to="/goods/title">进入标题</router-link>
        <router-link to="/goods/img">进入图片</router-link>

        <div>
            <router-view></router-view>
        </div>
    </div>

</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

<!-- Title.vue -->
<template>
    这是商品标题
</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

<!-- Image.vue -->
<template>
    <div>this is goods image</div>
</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// import Hello from '@/components/hello'
import Goodslist from '@/views/Goodslist'
import Title from '@/views/Title'
import Img from '@/views/Image'

Vue.use(Router)

export default new Router({
  // 路由模式 history,hash
  mode:'hash',
  routes: [
    {
      path: '/goods',
      name: 'Goodslist',
      component: Goodslist,
      // 使用嵌套路由
      // 一个数组,里面存的是对象,每个对象为一个组件
      children:[
          {
              path:'title',
              name:'title',
              component: Title
          },
          {
              path:'img',
              name:'img',
              component:Img
          }
      ]
    }
  ]
})

4858美高梅 8

 

2.嵌套路由

  使用处境,菜单。

<!-- Goodslist.vue -->
<!-- vue-router其实是对history的封装 -->
<template>
    <div>
        这是商品列表      


        <br>
        <!-- router-link 和 router-view 分别是两个封装好了的标签 
             在使用嵌套路由的时候,我们需要在goods路由下 来设置 router-view来承载余下的两个页面
             router-link 是 对a标签的封装 作用就是跳转
        -->
        <router-link to="/goods/title">进入标题</router-link>
        <router-link to="/goods/img">进入图片</router-link>

        <div>
            <router-view></router-view>
        </div>
    </div>

</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

<!-- Title.vue -->
<template>
    这是商品标题
</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

<!-- Image.vue -->
<template>
    <div>this is goods image</div>
</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// import Hello from '@/components/hello'
import Goodslist from '@/views/Goodslist'
import Title from '@/views/Title'
import Img from '@/views/Image'

Vue.use(Router)

export default new Router({
  // 路由模式 history,hash
  mode:'hash',
  routes: [
    {
      path: '/goods',
      name: 'Goodslist',
      component: Goodslist,
      // 使用嵌套路由
      // 一个数组,里面存的是对象,每个对象为一个组件
      children:[
          {
              path:'title',
              name:'title',
              component: Title
          },
          {
              path:'img',
              name:'img',
              component:Img
          }
      ]
    }
  ]
})

4858美高梅 9

 

编制程序式路由

因此js来贯彻页面包车型大巴跳转
$router.push(“name”);
$router.push({path:”name”});
$router.push({path:”name?a=123″});或者$router.push({path:”name”,query:{a:123}})
$router.go(1) 类似于history.go 功能

4858美高梅 10

image.png

页面怎么获取到传递的参数

4858美高梅 11

image.png

注意:
$route.params.goodsId params是动态路由传递参数
$route.query .goodsId query组件切换路由与路由之间的参数字传送递

4858美高梅 12 

3.编程式路由

  顾名思义,就是经过写js代码来贯彻路由啦。

  使用的函数: $router.push(“name”) 或 $router.push({ path :”name “}) 

  在跳转的时候还足以投入传递的参数。

  $router.push({ path:”name?b=222″}) 或 $router.push({path:’name’
,query:{a:111}})

  还足以应用 

  $router.go(1) //类似于 history()

  

  

<!-- vue -->
<!-- vue-router其实是对history的封装 -->
<template>
    <div>
        这是商品列表      


        <br>
        <!-- router-link 和 router-view 分别是两个封装好了的标签 
             在使用嵌套路由的时候,我们需要在goods路由下 来设置 router-view来承载余下的两个页面
             router-link 是 对a标签的封装 作用就是跳转
        -->
        <router-link to="/goods/title">进入标题</router-link>
        <router-link to="/goods/img">进入图片</router-link>

        <div>
            <router-view></router-view>
        </div>
        <router-link to="/cart">前往购物车</router-link>
        <button @click='jump'>btn跳转</button>
    </div>

</template>

<script type="ecmascript-6">
    export default{
        methods:{
            jump(){
                this.$router.push({path:'/cart?goodsId=333'})
            }
        }
    }
</script>

<style rel="stylesheet">

</style>

<!-- vue -->
<template>
    <div>
        this is cart page
        <p>
            {{$route.query.goodsId}}
        </p>
    </div>
</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

 

这一次在cart页面接受参数使用的是query 而不是事先动态路由的 params那是因为

query是页面之间传递参数时候用的 而 params是组件之间传递参数用的。

 

3.编制程序式路由

  顾名思义,正是经过写js代码来贯彻路由啦。

  使用的函数: $router.push(“name”) 或 $router.push({ path :”name “}) 

  在跳转的时候还足以加入传递的参数。

  $router.push({ path:”name?b=222″}) 或 $router.push({path:’name’
,query:{a:111}})

  还是能动用 

  $router.go(1) //类似于 history()

  

  

<!-- vue -->
<!-- vue-router其实是对history的封装 -->
<template>
    <div>
        这是商品列表      


        <br>
        <!-- router-link 和 router-view 分别是两个封装好了的标签 
             在使用嵌套路由的时候,我们需要在goods路由下 来设置 router-view来承载余下的两个页面
             router-link 是 对a标签的封装 作用就是跳转
        -->
        <router-link to="/goods/title">进入标题</router-link>
        <router-link to="/goods/img">进入图片</router-link>

        <div>
            <router-view></router-view>
        </div>
        <router-link to="/cart">前往购物车</router-link>
        <button @click='jump'>btn跳转</button>
    </div>

</template>

<script type="ecmascript-6">
    export default{
        methods:{
            jump(){
                this.$router.push({path:'/cart?goodsId=333'})
            }
        }
    }
</script>

<style rel="stylesheet">

</style>

<!-- vue -->
<template>
    <div>
        this is cart page
        <p>
            {{$route.query.goodsId}}
        </p>
    </div>
</template>

<script type="ecmascript-6">

</script>

<style rel="stylesheet">

</style>

 

本次在cart页面接受参数使用的是query 而不是在此之前动态路由的 params那是因为

query是页面之间传递参数时候用的 而 params是组件之间传递参数用的。

 

取名路由和命名视图

给路由定义不相同的名字,依照名字实行匹配
给不相同的router-view定义名字。通过名字举办对应组件的渲染
router/index.js

4858美高梅 13

image.png

App.vue

4858美高梅 14

image.png

展现效果

4858美高梅 15

image.png

通过name获取页面,传递params:

4858美高梅 16 

在对象页面通过this.$route.params获取参数:

4858美高梅 17 

2.Query

页面通过path和query传递参数,该实例中row为某行表格数据

4858美高梅 18

在指标页面通过this.$route.query获取参数:

this.$route.query.row.xxx

如上这篇Vue中this.$router.push参数获取格局正是笔者分享给大家的全部内容了,希望能给大家二个参阅,也希望大家多多支持脚本之家。

你可能感兴趣的篇章:

  • Vue连串:通过vue-router怎么样传递参数示例
  • 详解vue-router 2.0
    常用基础知识点之router.push()
  • 详解vue-router2.0动态路由得到参数

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有