Vue巩固--Router

路由：就是通过互联的网络把信息从源地址传输到目的地址的活动。

路由器提供了两种机制：路由和转送。

​ 路由是决定数据包从来源到目的地的路径；

​ 转送是输入端的数据转移到合适的输出端；

路由中有一个非常重要的概念叫路由表。

​ 路由表本质上是一个映射表，决定了数据包的指向。

补充：前端渲染、后端渲染

1.后端渲染

​ jsp：java server page，早期的前端可能由jsp开发。

在网页里输入网址url，会发送给服务器，例如在网页头部输入https://www.taobao.com
发送给服务器，服务器接收为url：taobao.com，之后在服务器中用jsp、php等语言把请求的网页写好，网页内容包括html+css+java（其中java的作用是从数据库中读取数据，并将它动态的放在页面中），网页在服务器已经成型已经是最终的页面样子，这期间没有ajax请求，之后将这个已经成型的网页传到浏览器展示，传给浏览器的东西只有html和css。因为整个页面的成型都是在后端服务器完成的所以为服务器渲染也是后端渲染。

1.1后端路由

书面解释：后端路由阶段
​ 早期的网站开发整个HTML页面是由服务器来渲染的，服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示。
但是，一个网站，这么多页面服务器如何处理呢？

• 一个页面有自己对应的网址，也就是URL；
• URL会发送到服务器，服务器会通过正则对该URL进行匹配，并且最后交给一个Controller进行处理；
• Controller进行各种处理，最终生成HTML或者数据，返回给前端；
• 这就完成了一个IO操作；

上面的这种操作就是后端路由，当我们页面中需要请求不同的路径内容时，交给服务器来进行处理，服务器渲染好整个页面，并且将页面返回给客户端；这种情况下渲染好的页面，不需要单独加载任何的js和css，可以直接交给浏览器展示，这样也有利于SEO的优化；

后端路由的缺点：

• 一种情况是整个页面的模块由后端人员来编写和维护的；
• 另一种情况是前端开发人员如果要开发页面，需要通过PHP和Java等语言来编写页面代码；
• 而且通常情况下HTML代码和数据以及对应的逻辑会混在一起，编写和维护都是非常糟糕的事情。
  （通俗理解：在后端渲染过程中，每一个在浏览器发出的请求都发送到后端服务器由服务器形成对应页面再返回给浏览器展示，期间处理URL和页面之间的映射关系的就是后端路由。看谁在处理谁在保存这个映射关系，此处是后端在进行所以为后端路由。）

2.前后端分离阶段

书面解释：前后端分离阶段

• 随着Ajax的出现，有了前后端分离的开发模式；

• 后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过JavaScript将数据渲染到页面中；

• 这样做最大的优点就是前后端责任的清晰，后端专注于数据上，前端专注于交互和可视化上；

• 并且当移动端（iOS/Android）出现后，后端不需要进行任何处理，依然使用之前的一套API即可；

• ​ 目前很多的网站依然采用这种模式开发；
  （通俗理解：当在页面发送请求不是直接请求后端服务器而是可能请求静态资源服务器（写的所有内容先放到静态资源服务器），把html+css+js拿过来，此时需要的这些内容放置在浏览器，其中html和css可以直接渲染，而js则由浏览器执行，例如假设js代码要执行$.ajax(url:api接口:success:function)则会请求提供api接口的服务器，服务器将数据返回给浏览器，之后浏览器处理数据及其他js相关操作。
  前后端分离的前端渲染：如上描述，浏览器中显示的网页中的大部分内容都是由前端写的js代码在浏览器中执行，最终渲染出来的网页，所以称之为前端渲染。此过程可减轻服务器工作量。）

2.1单页面富应用阶段

• 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由；
• 也就是前端来维护一套路由规则；

3.SPA页面

SPA：simple page web application（单页面富应用）

整个页面只有一个html页面，给出一套路由关系，一个url对应一个页面，在vue中就是一个url对应一个组件，而这种对应关系由前端维护，故为前端路由。
（在浏览器发出的url不同请求，需要到静态资源服务器中获取对应的页面/组件，例如：urlcoderwhy/home则在静态资源服务器中找到home组件渲染在浏览器中，管理这一映射关系的为前端路由）
前端路由的核心是什么呢？

改变URL，但是页面不进行整体的刷新。

如何实现呢？

4.URL的hash和HTML5的history

改变URL但是页面不进行整体刷新。

URL的hash

​ URL的hash也就是锚点(#)，本质上是改变window.location的href属性；

​ 我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新。

location.href
"https://192.168.1.101:8000/examples/urlChange/"
location.hash = '/'
"/"
location.href
"https://192.168.1.101:8000/examples/urlChange/#/"
location.hash = '/foo'
"/foo"
location.href
"https://192.168.1.101:8000/examples/urlChange/#/foo"

HTML5的history模式：pushState，back（两个类似栈的先进先出）

location.href
"https://192.168.1.101:8000/examples/urlChange/"
history.pushState({},'','/foo')
undefined
location.href
"http://192.168.1.101:8000/foo/"
history.pushState({},'','/')
undefined
location.href
"http://192.168.1.101:8000/"
history.pushState({},'','about')
undefined
location.href
"http://192.168.1.101:8000/about/"
history.pushState({},'','demo')
location.href
"http://192.168.1.101:8000/demo/"
history.back()
undefined
location.href
"http://192.168.1.101:8000/about#/"
history.back()
undefined
location.href
"http://192.168.1.101:8000/"

HTML5的history模式：replaceState

更改语句是history.replaceState()

location.href
"https://192.168.1.101:8000/#/"
history.replaceState({},'','home')
undefined
"https://192.168.1.101:8000/home/"
history.replaceState({},'','about')
undefined
"https://192.168.1.101:8000/about/"

HTML5的history模式：go

语句是history.go()，只能在history.pushState情景下使用。

补充说明：上面只演示了三个方法，因为history.back()等价于history.go(-1)；history.forward()则等价于history.go(1)；这三个接口等同于浏览器界面的前进后退。

history.pushState({},'','home')
undefined
"https://192.168.1.101:8081/home"
history.pushState({},'','about')
undefined
"https://192.168.1.101:8081/about"
history.pushState({},'','me')
undefined
"https://192.168.1.101:8081/me"
history.pushState({},'','demo')
undefined
"https://192.168.1.101:8081/demo"
/*history.go(-1) == history.back()*/
history.go(-1)
undefined
"https://192.168.1.101:8081/me#/"  /*后面出现#/的原因是默认配置的是hash模式*/
history.go(-2)
undefined
"https://192.168.1.101:8081/home#/"
history.go(2)
undefined
"https://192.168.1.101:8081/me#/"
history.forward()
undefined
"https://192.168.1.101:8081/demo#/"

5.认识vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适用于构建单页面应用。

vue-router是基于路由和组件的

​ 路由用于设定访问路径，将路径和组件映射起来；

​ 在vue-router的单页面应用中，页面的路径的改变就是组件的切换。

6.安装和使用vue-router

通过工程化方式进行开发。

直接使用npm来安装路由即可。

步骤一：安装vue-router

​ npm install vue-router --save

步骤二：在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）

​ 第一步：导入路由对象，并且调用Vue.use(VueRouter)；

​ 第二步：创建路由实例，并且传入路由映射配置；

​ 第三步：在Vue实例中挂载创建的路由实例。

创建index.js文件用于配置路由信息，在index.js文件中
//配置路由相关信息。因为要使用vue所以也要导入vue
import VueRouter from 'vue-router'
import Vue from 'vue'
//1.通过Vue.use（插件），安装插件。
//因为要使用vuerouter插件，所以在use括号中填入VueRouter插件
Vue.use(VueRouter) 
----------------------------------------------------------------------------
//2.创建VueRouter实例对象，跟创建vue对象一样也要传入选项（routes）
const router = new VueRouter({
	//配置路由和组件之间的应用关系
	routes: [
		
	]
})
----->增强写法
const routes = []
const router = new VueRouter({
	//配置路由和组件之间的应用关系
	routes
})
--------------------------------------------------------------------------------
//3.将router对象传入到Vue实例，把router:router挂载到main.js创建的Vue实例中，因为是将router挂载出去所以也需要使用export default语句把router导出，再在main.js文件中用import router from 'index.js'导入，此时挂载才生效
//在main.js文件中挂载
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
	el: '#app',
	router: router,
	render: h => h(App)
})
//在index.js文件中增加语句后
......
const routes = []
const router = new VueRouter({
	//配置路由和组件之间的应用关系
	routes
})
export default router
//再在main.js将router导入后
import Vue from 'vue'
import App from './App'
import router from './router/index.js'  //可省略写为...from './router'，因为只有index一个文件，会自动寻找到index文件
Vue.config.productionTip = false
new Vue({
	el: '#app',
	router: router,  //可直接简写为router,
	render: h => h(App)
})

使用vue-router的步骤：
第一步：创建路由组件；

第二步：配置路由映射-->组件和路径映射；

第三步：使用路由-->通过router-link和router-view

• router-link：该标签是一个vue-router中已经内置的组件，会被渲染成一个a标签；

• router-view：该标签会根据当前的路径，动态渲染出不同的组件；

​网页的其他内容，比如顶部的标题/导航，或者底部的一些版权信息等，会和处于同一个等级；

​在路由切换时，切换的是router-view挂载的组件，其他内容不会发生改变；

示例：在App.vue中设置两个标签当点击标签时路由切换两个组件home.vue和about.vue
-----------------------------------------------------------------------------
router文件index.js代码：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/HomeHome'
import About from '../components/AboutAbout'
Vue.use(VueRouter)
const routes = [
    {
        path: '/home',
        component: Home,
    },
    {
        path: '/about',
        component: About,
    }
]
const router = new VueRouter({
    routes,
})
export default router
-------------------------------------------------------------------------------------
main.js代码：
import Vue from 'vue'
import App from './App.vue'
import VueCropper from 'vue-cropper'
import router from './router/index'
Vue.use(VueCropper)
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
------------------------------------------------------------------------------------
App.vue代码：
<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
   return {}
  },
   methods:{}
}
</script>
---------------------------------------------------------------------------------------
两组件代码：
<template>
  <div>我是首页</div>
</template>
<script>
export default {
  name: 'HomeHome',
  data () {
   return {}
  },
   methods:{}
}
</script>
-------------------
<template>
  <div>我是关于</div>
</template>
<script>
export default {
  name: 'AboutAbout',
  data () {
   return {}
  },
   methods:{}
}
</script>

7.路由的默认值和修改为history模式

默认情况下进入网站的首页，希望渲染首页的内容，使用redirect设置重定向。

只需在routes中多配置一个映射就可以了

const routes = [
  {
    path: '/',
    redirect: '/home',
  }
]

配置解析：

• path配置的是根路径；
• redirect是重定向，也就是我们将根据路径重定向到/home的路径下，就可以实现想要的结果了。

想把默认的hash修改为history从而去掉url中的“#”符号

添加mode: 'history'

const router = new VueRouter({
  routes,
  mode: 'history'
})
url为“https://localhost:8080/test”

8.router-link补充

router-link除了属性: to用于指定跳转的路径外还有其他属性。

tag：tag可以指定<router-link>之后渲染成什么组件，比如<router-link to='/home' tag='li'>上面的代码会被渲染成一个<li>元素，而不是<a>标签。

replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中。

active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。

• 在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类；
• 但是通常不会修改类的属性，会直接使用默认的router-link-active即可。

9.代码实现路由跳转

给标签添加监听实现点击时路由跳转，跳转内容仍然是home和about组件。

<button @click="homeClick">首页</button>
<button @click="aboutClick">首页</button>
<router-view></router-view>
export default {
  name: 'App',
  methods: {
    homeClick() {
      this.$router.push('/home')  
      //或者使用
      this.$router.replace('/home')
    },
    aboutClick() {
      this.$router.push('/about')
      //或者使用
      this.$router.replace('/about')
    }
  }
}
//其中push和replace的区别是：push=>pushState，可以后退，replace不能后退
//其中this.$router中的router就是在index.js中const router=new VueRouter中的router对象，this.$router拿到的是router中routes里的当前活跃的那个路由，哪个活跃拿到的就是哪个

10.动态路由

在某些情况下，一个页面的path路径可能是不确定的，例如当我们进入用户界面时，希望是下面的路径：

/user/aaa或者/user/bbb，除了有前面的/user之外，后面还跟上了用户的ID，这种path和Component的匹配关系，我们称之为动态路由（也是路由传递数据的一种方式）。

也即是哪个登录在url后面拼接上这个用户的id。

显示拼接上的动态路由id，/user/:id，/user/lisi
在user.app组件中
{
  path: '/user',
  component: User,
}
在App.vue中
<router-link to="/user">用户</router-link>
浏览器中显示的url为“https://localhost:8080/user”
---------------------------->改为动态路由动态后
在user.app组件中
{
  path: '/user/:userId',
  component: User,
}
在App.vue中
<router-link to="/user/zhangsan">用户</router-link>
浏览器中显示的url为“https://localhost:8080/user/zhangsan”

既能把用户id拼接上也能获取用户的id，有index.js、App.vue、User.vue几个页面文件
在index.js中
const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:userId',
    component: User
  },
]
const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})
-------------------------------------------------
在User.vue中
<div>
  <h2>我是用户界面</h2>
  <h2>{{userId}}</h2>
</div>
<script>
  export default {
    name: "user",
    computed: {
      userId() {
        return this.$route.params.userId
     //参数params可以获取用户id，其中params.userId中的userId名字跟path: '/user/:userId'中的“:”后的名字一致
      }
    }
  }
</script>
----------------------------------------------
在App.vue中
<router-link :to="'/user/'+userId">用户</router-link>
export default{
  name: 'App',
  data() {
    return {
      userId: 'zhangsan',  //把待拼接的userid写在data中而不是直接写死在标签里
    }
  }
}

$router拿到的是创建的大的路由对象，$route拿到的是当前处于活跃的路由对象

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法；

$router为当前router跳转对象里面可以获取name、path、query、params等；

11.路由懒加载

当打包构建应用时，JavaScript包会变得非常大，影响页面加载。

如果把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，会更加高效。

解释就是：路由会定义很多不同的页面，这个页面最后被打包在哪里？一般情况下是放在一个js文件中，但是页面这么多放在一个js文件中必然会造成这个页面非常大，如果一次性从服务器请求下来这个页面可能需要花费一定的时间，甚至用户的电脑上还出现了短暂空白情况，为避免这种情况使用路由懒加载。

​ 11.1懒加载的方式

方式一：结合Vue的异步组件和Webpack的代码分析（比较古老）

const Home = resolve => {require.ensure(['../components/Home.vue'], () =>

{resolve(require('../components/Home.vue')) })}

方式二：AMD写法

const About = resolve =>require(['../components/About.vue'], resolve)

方式三：在ES6中，可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割

const Home = () => import('../components/Home.vue')

示例：
import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'
----------------->路由懒加载
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
const routes =[
    {
        path: '/home',
        component:Home,
    },
    {
        path: '/about',
        component:About,
    },
    ...
]
//或者另一种写法，直接在routes里写
const routes =[
    {
      path: '/home',
      component: () => import('../components/Home')
    },
    {
      path: '/about',
      component: () => import('../components/About')
    },
]

12.嵌套路由

嵌套路由是一个很常见的功能：

• 例如在home页面中，希望通过/home/news和/home/message访问一些内容；
• 一个路径映射一个组件，访问这两个路径也会分别渲染两个组件；

路径和组件关系如下：

路径                                     组件
/home  -------------------------->      Home
               /home/news ------->      News
               /home/message ---->      Message
/about -------------------------->      About

实现路由嵌套有两个步骤：

• 创建对应的子组件，并且在路由映射中配置对应的子路由；
• 在组件内部使用标签；

创建新的在Home组件下的子组件，HomeNews.vue和HomeMessage.vue，添加路由嵌套实现这两个组件的跳转
在index.js文件中
使用懒加载的方式添加这两个嵌套子路由
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const routes = [
    {
        path: '/home',
        component: Home,
        children: [
            {
                path: 'news', //子路由前面不用加/
                component: HomeNews
            },
            {
                path: 'message',
                component: HomeMessage
            }
        ]
    },
    {
        path: '/about',
        component: About,
    }
]
------------------------------>另一种懒加载写法
const routes = [
    {
        path: '/home',
        component: Home,
        children: [
            {
                path: 'news', //子路由前面不用加/
                component: () => import('../components/HomeNews')
            },
            {
                path: 'message',
                component: () => import('../components/HomeMessage')
            }
        ]
    },
    {
        path: '/about',
        component: About,
    }
]
因为两个新组件是显示在首页Home里的，所以让路由显示的位置应该在Home.vue中,
在Home.vue中添加标签router-link和router-view
<p>我是首页</p>
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>

13.vue-router参数传递

传递参数主要有两种类型：params和query

params的类型：

• 配置路由格式：/router/:id
• 传递的方式：在path后面跟上对应的值
• 传递后形成的路径：/router/123，/router/abc

query的类型：

• 配置路由格式：/router，也就是普通配置；
• 传递的方式：对象中使用query的key作为传递方式
• 传递后形成的路径：/router?id=123，/router?id=abc

补充：URL协议组成

协议：//主机:端口/路径?查询

scheme://host:port/path?query#fragment

使用和JavaScript两种方式传递参数

新添加Profile.vue组件作为演示
方式一：使用<router-link>方式
在index.js中添加下面代码
const Profile = () => import('../components/Profile')
const routes = [
  path: '/profile',
  component: Profile,
]
在App.vue中添加
<router-link to="/profile">档案</router-link>
---------------------->改写为传递参数的形式
<router-link :to="{}">档案</router-link> //要传递参数to后面跟的不能是变量，更改为对象加上{}，且前面必须加上v-bind不然{}不会被当成对象且{}会被直接传递过去
<router-link :to="{path: '/profile',query:{name: 'why',age: 18, height: 1.88}}">档案</router-link>
浏览器url 显示结果为：https://localhost:8080/profile?name=why&age=18&height=1.88
----------------------------------------------------------------------------------
方式二：使用JavaScript方式
在App.vue中添加两个按钮实现组件跳转时传递数据，index.js配置与方式一一样
<button @click="userClick">用户</button>
<button @click="profileClick">档案</button>
...
methods: {
   userClick() {
     this.$router.push('/user/' + this.userId)
    },
    profileClick() {
     this.$router.push({
       path: '/profile',
       query: {
         name: 'kobe',
         age: 18,
         height: 1.87
       }
    })
    }
}

14.导航守卫

导航守卫主要用于监听组件跳转，从哪里跳到哪里等等。

考虑一个需求：在一个SPA应用中，如何改变网页的标题？

• 网页标题是通过<title>来显示的，但是SPA只有一个固定的HTML，切换不同的页面时，标题不会改变；

• 可以通过js来修改<title>的内容，windows.document.title = '新的标题'；

那么在vue中如何修改，什么时候修改比较合适？

• 比较容易想到的修改标题的位置是每一个路由对应的组件.vue文件中；

• 通过mounted声明周期函数，执行对应的代码进行修改即可；

• 当页面多时，这种方式不易维护（因为需要在多个页面执行类似的代码）

什么是导航守卫？

• vue-router提供的导航守卫主要用来监听路由的进入和离开的；

• vue-router提供了beforeEach和afterEach的钩子函数，它们会在路由即将改变前和改变后触发。

使用beforeEach来完成标题的修改，也就是下方代码所展示的例子：

• 首先，可以在钩子函数当中定义一些标题，可以利用meta来定义；
• 其次，利用导航守卫修改我们的标题；

导航钩子的三个参数解析（下方代码示例中也进行的解释）：

to：即将要进入的目标的路由对象；

from：当前导航即将要离开的路由对象；

next：调用该方法后，才能进入下一个钩子；

示例：全局导航守卫
在index.js中
const routes = [
    {
        path: '/home',
        component: Home,
        meta: {
            title: '首页',
        }
    },
    {
        path: '/about',
        component: About,
        meta: {
            title: '关于',
        }
    },
    {
        path: '/user/:id',
        component: User,
        meta: {
            title: '用户',
        }
    }
]
const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})
//调用beforeEach函数
router.beforeEach(function (to, from, next) {
//需要在function中传入三个参数
})
---------->改写为箭头函数形式更方便
router.beforeEach((to, from, next) => {
    //to跟from，表示从from跳转到to
    //document.title = to.title
    //本例子中to.title中没有内容，可使用meta为每个路由添加meta元数据后再使用to跳转。添加meta语句如上代码所示。
    //给上面routes映射关系添加完meta后，语句可写为
    document.title = to.meta.title
    //如果想取得更详细的meta内容可使用document.title = to.matched[0].meta.title
    //必须调用下next，不调用不进行下一步
    next()
})
//当点击用户时运行结果为https://localhost:8080/user/zhangsan，同时浏览器头部title内容更改为用户

补充：meta：元数据（描述数据的数据）

15.导航守卫补充

补充一：如果是后置钩子也就是afterEach，不需要主动调用next()函数。

补充二：上面我们使用的导航守卫，被称为全局守卫，路由独享守卫和组件内守卫参数与全局守卫一样

• 路由独享的守卫，只有进入到某个路由里面才会进行回调函数；
• 组件内的守卫，直接写在组件内；

//前置守卫(guard)，跳转之前调用
router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title
  console.log('++++++');
  next()
})
//后置钩子(hook)，跳转之后调用
router.afterEach((to, from) => {
    console.log('-------')
})
//路由独享守卫
{
    path: '/about',
    component: About,
    meta: {
       title: '关于',
    },
    //添加路由独享守卫，一进入这个路由就会触发
    beforeEnter: (to, from, next) => {
        //一进入这个路由里面就会回调console.log()
        console.log('beforeEnter')
        //必须调用next才会进行下一步
        next()
    }
}
//组件内守卫，直接写在组件内
const app = [
    template: '#cpn',
    beforeRouterEnter (to, from, next) {
        ... //官方文档Vue Router有详细介绍
    },
    beforeRouteUpdate (to, from, next) {
        ...
    },
    beforeRouteLeave (to, from, next) {
        ...
    }
]

16.keep-alive与vue-router

• keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

  ​ 它们有两个非常重要的属性：

  • include - 字符串或正则表达，只有匹配的组件会被缓存；
  • exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存；

• router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存。

在Home.vue组件中
export default {
  name: 'Home',
  data() {
    return {
      message: '你好',
      path: '/home/news'
    }
  },
  created() {
    console.log('created')
  },
  destroyed() {
    console.log('destroyed')
  },
  //activated和deactivated只有该组件被保持了状态使用了keep-alive时，才是有效的
  activated() {
    this.$router.push(this.path)
  },
  deactivated() {
    this.path = this.$route.path
  }
}
在App.vue组件中
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<button @clicko="/userClick">用户</button>
<button @click="/profileClick">档案</button>
<keep-alive>
    <router-view/>
<keep-alive>
----------------------------------------------------------------
//上面代码若写成如下形式代表除了Home,About组件外其他都缓存
<keep-alive exclude="Home,About">
    <router-view/>
<keep-alive>

(如有错误，请指正)