vue学习day6

页面跳转

页面跳转有两种方法：通过标签跳转，通过api跳转

基本写法

该写法仅仅用来跳转页面，不能用来传递数据

//to="/path"
<router-link to="/b">跳转到B</router-link>
//a标签可也用于页面跳转，但是它只能用于第三方页面的跳转，如下写法，可以跳转到百度首页
<a href="http://www.baidu.com">a标签跳转百度</a>
//但是，router-link不可用于第三方页面跳转，它用于vue页面之间的跳转。如下写法把http://www.baidu.com拼接到url后面，并没有跳转到百度首页，如下图
<router-link to="http://www.baidu.com">百度一下</router-link>

第二种写法 :to=“{}”

• 使用path跳转

<router-link :to="{path : '/b'}">B页面{path : "/b"}</router-link>

• 命名路由跳转
  在routes.js文件种给路由命名

{
      path : "/b",
      name :"B",  //命名路由
      component : () => import('@/views/B.vue'),
    },

在.vue文件中通过路由名跳转

<router-link :to="{name : 'B'}">B页面{ name : 'B'}</router-link>

页面跳转并且传递参数

使用query传递数据

query和path联用

<router-link 
        :to="{
            path : '/b',
            query : {
                id : 'x001',
                name : '手机',
                price : 123,
                type : {
                    brand : '华为',
                    prices : [100,200,3090,120]
                }
            }
        }"
        >B页面传递 query数据</router-link>

params传递数据

params和命名路由联用

<router-link
       :to="{
           name : 'B',
           params : {
               id : 's003',
               name : '电饭锅',
               price : 888,
                type : {
                    brand : '华为',
                    prices : [100,200,3090,120]
                }
           }
       }"
       >B页面传递 param数据</router-link>

query传参和params传参的区别

• 安全性不同
  • query传参，传递的数据将拼接大屏url后， 在浏览器中数据是可见的；
  • params传参，数据传递不可见
• 配合路由不一样
  • query与 path:"/route"配合
  • params 与 name : “route名称”
• 传递的数据类型限制不一样

  • query：一般只用来传递普通的key=value，其值一般是number，Stirng，boolean。如果传递数据是数组或者对象，会出现两个问题:
    1.对象和数组会被进行字符串转码，转成[object object]拼接在url后面;
2.如果传递的数据过多，拼接在url后面的字符串长度会很长，但是浏览器的url栏字符长度是有限的，过长会导致数据丢失

  • params：传递数据没有限制

• 跳转到目标页后，页面刷新 query数据不会丢失，但是params数据会丢失。
  因为query跳转是把加载到页面栈中的页面调用；而params跳转则是把加载到页面栈中的页面替换掉，页面栈就是没有跳转之前的页面了，刷新之后数据进行重新请求，请求不到数据，因为之前的页面已经被目标页面替换了。
• 目标页面接收数据的方式不同
  • query:
    视图中： $route.query.key1接收显示。JS中this.$route.query.key1
    B.vue页面中这样接收：

<h3>接收query参数</h3>
       <h1>产品ID：{{ $route.query.id }}</h1>
       <h1>产品名称：{{ $route.query.name }}</h1>
       <h1>产品价格: {{ $route.query.price }}</h1>

• params :
  视图中： $route.params.key2接收显示。JS中this.$route.query.key2
  B.vue页面中这样接收：

<h3>接收param参数</h3>
       <h1>产品ID：{{ $route.params.id }}</h1>
       <h1>产品名称：{{ $route.params.name }}</h1>
       <h1>产品价格: {{ $route.params.price }}</h1>
       <h1>其他对象数据：
            <h3 v-for="(item,key) in $route.params.type" :key="key">
                  {{ item }}
            </h3>
       </h1>

三种标签跳转的方式场景总结

        1、如果只单纯跳转，不传递参数 to="/path"
        2、如果需要传递普通的key=value，且刷新时保证数据页面
          数据存在 :to="{path:'/path', query:{}}"
        3、如果传递对象等复杂数据，或者传递数据量非常多
          用:to="{name : 'routename', params: {}}"

编程式导航

通过this.$router.push()记录页面栈的跳转
通过this.$router.replace()直接替换当前页面栈
通过this.$router.back()返回上级页面栈
.vue文件中

<template>
  <div>
		<el-button @click.native="go">编程式导航 B</el-button>
        <el-button @click.native="go1">编程式导航 B query传参</el-button>
        <el-button @click.native="go2">编程式导航 B params传参</el-button>
        <el-button @click.native="go3">编程式导航 B replace跳转</el-button>


</div>
</template>

<script>
export default {
methods : {
        go(){ // this.$router.push('/path')
            //直接调转
            this.$router.push('/b');
        },
        go1(){
            this.$router.push({
                path : "/b",
                query : {
                    id : "x0032",
                    name : "编程导航query传参",
                    price : "200"
                }
            })
        },
         go2(){
            this.$router.push({
                name : "B",
                params : {
                    id : "S0032",
                    name : "编程导航params传参",
                    price : "100"
                }
            })
        },
        go3(){
            // 直接替换A的页面栈记录
            this.$router.replace('/b');
        }
    }
}
</script>

<style>

</style>

$route 和 $router的区别
$route 是配置路由对象的，用来记录每个路由配置的信息，主要用于接收路由跳转传递的数据。

$router 是使用vue-router常见的理由对象，router里面有很多API方法和属性，用于实现路由的跳转和传参。