一、标签跳转： 映射路由

1、不带参数跳转

<template>
   <!-- 在Vue中的<router-link>标签中，到页面最终还是转为<a>标签 -->
   <router-link to="/about">
       <button>打开关于我们 - 不带参数1</button>
   </router-link>
   <router-link :to="{path: '/about'}">
       <button>打开关于我们 - 不带参数2</button>
   </router-link>
</template>
<p><strong>&nbsp; </strong></p>

2、带参数跳转

<!-- home页面（首页） -->
<template>
   <router-link :to="{path: '/about', query: {id: 1024, name:'mupiao', age: 28 }}">
       <button>打开关于我们 - 带参数1</button>
   </router-link>
   <router-link :to="{name: 'about', params: {id: 1024, name:'mupiao', age: 28 }}">
       <button>打开关于我们 - 带参数2</button>
   </router-link>
</template>

3、接收参数

// about页面（关于我们）
<template>
     <section>关于我们</section>
</template>
<script>
export default {
   name: "about",
   data() {
       return {};
   },
   created() {
       // 在Vue实例被创建之后的钩子函数中，接收home页面传过来的参数
       // 以query方式接收参数：【query传递数据是通过URL传递的，类似ajax中的get方式】
       console.log(this.$route.query.id);      // 1014
       console.log(this.$route.query.name);    // mupiao
       console.log(this.$route.query.age);     // 28
       // 以params方式接收参数：【params方式，类似ajax中的post方式】
       console.log(this.$route.params.id);      // 1014
       console.log(this.$route.params.name);    // mupiao
       console.log(this.$route.params.age);     // 28
   }
}

二、编程式路由跳转： this.$router.push()

注意：和name配对的是params，和path配对的是query
localStorage — 是永久存储在本地，除非你主动去删除;
sessionStorage — 是存储到当前页面关闭为止，和其他tab页没关联;
1.命名路由搭配params，刷新页面参数会丢失（参数存在sessionStorage和localStorage中或使用查询参数搭配query）
2.查询参数搭配query，刷新页面数据不会丢失

1、不带参数跳转

<!-- home页面（首页） -->
<template>
   <router-link :to="{path: 'about'}">
       <button>打开关于我们</button>
   </router-link>
   <button @click="open">打开关于我们</button>
</template>
<script>
export default {
   name: "home",
   data() {
       return {};
   },
   methods: {
       open() {
           this.$router.push('/about');
       }
   },
}
</script>

2、带参数跳转

<!-- home页面（首页） -->
<template>
    <router-link :to="{path: 'about'}">
        <button>打开关于我们</button>
    </router-link>
    <button @click="open1">打开关于我们 - query方式</button>
    <button @click="open2">打开关于我们 - params方式</button>
</template>
<script>
export default {
    name: "home",
    data() {
        return {};
    },
    methods: {
        // query方式（参数显示在路径上，刷新不会丢失）
        open1() {  
            this.$router.push({
                path: '/about',
                query: {
                  id: 2048,
                  book: "了不起的Node.js",
                  job: "Web前端"
                }
            });
        },
        //⚠️注：如果要传递的参数很长时，请问params方式，因为query方式是通过URL传递的，而URL传参数长度是有限制的哦！！
        // params方式（参数不显示在路径上，刷新会丢失）
        open2() {
            this.$router.push({
                name: "about", // ⚠️注：这里不能用path路径，只能用name【请对照router.js中的路由规则中的name项】，否则取不到传过去的数据
                params: {
                  id: 2048,
                  book: "了不起的Node.js",
                  job: "Web前端"
                }
            });
        }
    },
}
</script>

3、接收参数

// about页面（关于我们）
<template>
      <section>关于我们</section>
</template>
<script>
export default {
    name: "about",
    data() {
        return {};
    },
    created() {
        // 在Vue实例被创建之后的钩子函数中，接收home页面传过来的参数
        //⚠️注：在传递参数时，用什么方式传参，就用什么方式接收！！
        // 以query方式接收参数：【query传递数据是通过URL传递的，类似ajax中的get方式】
        console.log(this.$route.query.id);      // 2048
        console.log(this.$route.query.book);    // 了不起的Node.js
        console.log(this.$route.query.job);     // Web前端
        // 以params方式接收参数：【params方式，类似ajax中的post方式】
        console.log(this.$route.params.id);      // 2048
        console.log(this.$route.params.book);    // 了不起的Node.js
        console.log(this.$route.params.job);     // Web前端
        // this.$route 路由信息对象
        console.log(this.$route);  //this.$route 对象中包涵了路由的相关信息，请自看！！
</script>

真正的页面跳转：

一、HTML超链接跳转：跳转链接

//打开外部链接
<a target="_blank" href="https://www.baidu.com/s?wd=Vue">百度一下 Vue</a>

二、浏览器BOM中的location.href跳转：

//在当前页面打开URL页面
window.location.href = "https://www.baidu.com/s?wd=Vue";

三、浏览器BOM中的window.open()跳转：

//打开一个新的浏览器窗口
window.open("https://www.baidu.com/s?wd=Vue", "_blank", "width=1000, height=500", true);

解决刷新页面数据丢失问题及退出登录清空数据

在APP.vue中加入如下代码，目的是将vuex里的信息保存到sessionStorage里

//任何页面F5刷新都会执行APP.vue中的生命周期函数
//说明：登录登路由为/login
created () {
    //判断当前路由是否是登录路由，
    //如果不是，则认为是在非登录界面刷新，将store中的数据保存到sessionStorage中
    if(this.$router.currentRoute.path != "/login"){
      //在页面加载时读取sessionStorage里的状态信息
      if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({},     this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
      }
      //在页面刷新时将vuex里的信息保存到sessionStorage里
      window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
      })
    }else{
      //否则清空sessionStorage中的数据
      sessionStorage.clear()
    }
}

值得注意的一点是：
项目中的所有跳转至登录路由时，
不能使用this.$router.push(’/login’)
这种方式跳转，原因是这种方式不会触发APP.vue中的created函数，所以无法清空sessionStorage中的store数据；
window.location.replace(“/login”)
这种方式;跳转至登录路由时会触发APP.vue中的created函数，达到清空sessionStorage中的store数据的效果