您的位置:时时app平台注册网站 > web前端 > 第三天_路由_Vue.js2.0 Node ES6 MongoDB全栈系统学习【

第三天_路由_Vue.js2.0 Node ES6 MongoDB全栈系统学习【

2019-11-02 01:14

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则是用#来访问

彩世界网址 1

 

 

何以是前端路由?

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

 

动态路由相当

彩世界网址 2

image.png

彩世界网址 3

image.png

:goodsId :name 便是动态输入值 访谈如下
http://localhost:8080/#/goods/23424/user/shasha
能够在页面显示路由内容 主语这里是route 不是 router

彩世界网址 4

image.png

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是组件之间传递参数用的。

 

何以时候利用

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

选用了vue-cli 生成了少年老成套webpack的沙盘。

嵌套路由

路由里面嵌套路由,使用情形 左边菜单 左边内容展现
路由配置子路由

彩世界网址 5

image.png

页面使用

彩世界网址 6

image.png

尔后在中间演习 vue-router。

命名路由和命名视图

给路由定义分裂的名字,遵照名字举行相配
给分裂的router-view定义名字。通过名字举行对应组件的渲染
router/index.js

彩世界网址 7

image.png

App.vue

彩世界网址 8

image.png

来得效果

彩世界网址 9

image.png

以下是部分记录。

编制程序式路由

透过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 功能

彩世界网址 10

image.png

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

彩世界网址 11

image.png

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

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
          }
      ]
    }
  ]
})

彩世界网址 12

 

可取与短处

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

vue-router用来营造SPA 单页Web应用(single page web application,SPA)
<router-link></router-link>跳到内定的路由 (相通于a标签) 也许this.$router.push({path:''}) //通过代码格局开展页面调度
<router-view></router-view> 指令渲染

本文由时时app平台注册网站发布于web前端,转载请注明出处:第三天_路由_Vue.js2.0 Node ES6 MongoDB全栈系统学习【

关键词: