Vue-router 的演习上海时时乐走势图官网

之后在其中练习 vue-router。

命名路由和命名视图

给路由定义不同的名字,根据名字进行匹配
给不同的router-view定义名字。通过名字进行对应组件的渲染
router/index.js

上海时时乐走势图官网 1

image.png

App.vue

上海时时乐走势图官网 2

image.png

显示效果

上海时时乐走势图官网 3

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

上海时时乐走势图官网 4

image.png

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

上海时时乐走势图官网 5

image.png

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

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

上海时时乐走势图官网 6

 

 

动态路由匹配

上海时时乐走势图官网 7

image.png

上海时时乐走势图官网 8

image.png

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

上海时时乐走势图官网 9

image.png

使用了vue-cli 生成了一套webpack的模版。

嵌套路由

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

上海时时乐走势图官网 10

image.png

页面使用

上海时时乐走势图官网 11

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

 

优点与缺点

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

vue-router用来构建SPA 单页Web应用(single page web application,SPA)
<router-link></router-link>跳到指定的路由 (类似于a标签) 或者this.$router.push({path:''}) //通过代码方式进行页面调整
<router-view></router-view> 指令渲染

 

什么是前端路由?

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

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

 

什么时候使用

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

本文由上海时时乐走势图发布于web前端,转载请注明出处:Vue-router 的演习上海时时乐走势图官网

您可能还会对下面的文章感兴趣: