vuejs中如何实现路由切换及路由的缓存

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

前言

我们知道在vue项目里,实现路由的跳转是使用router-link标签,由于导航链接不止一个,在模板里写死导航的话,不是很灵活

我们往往是结合现成的UI框架,一些现成的组件,快速的去实现我们的导航,路由的跳转等

而当切换导航时,若有表单数据,想要保留表单的数据,那应该怎么实现呢，一起来学习下

01

使用vue-router

1. 安装vue-router

npm install -D vue-router@3   // 注意:如果没有加后面的3,默认安装的是vue-router@4.0的版本

2. 引入vue-router

导入Vue和VueRouter，还要调用Vue.use(VueRouter)

import Vue from 'vue';   // 引入vue
import VueRouter from 'vue-router';   // 引入vueRouter,引入VueRouter函数

3. 调用Vue.use(VueRouter)

// 省略...
// 使用插件的方式注入
Vue.use(VueRouter);

4. 引入路由组件

通过import关键字引入在pages文件夹下定义好的路由组件

import XXX from 'xxxx.vue'

5. 定义路由

每个路由应该映射一个组件。其中component 可以是静态组件,也可以是懒加载组件

const routes = [
   {
     name:'组件名称1',
     path: '路径1',
     component: xxx1,  // 组件名
   },
    {
     name:'组件名称2',
     path: '路径2',
     component: xxx2,  // 组件名
   },
]

6. 构造VueRouter实例化对象

使用new VueRouter创建 router 实例，接收一配置对象,然后传 routes 配置

const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

7. 创建和挂载根实例

导出路由router对象,然后在根实例中注入

要通过 router 配置参数注入路由

const app = new Vue({
  router
}).$mount('#app')

8. 模板中使用router-link

在模板中使用router-link结合to进行路由的设置和跳转

<router-link to='路径'></router-link>

02

实现路由的切换

在模板中我们使用router-link实现路由的跳转,并且要展示的内容视图,使用router-view代码如下所示

<template>
  <div id="app">
      
      <router-link :to="item.path" v-for="item in routers" :key="item.path" >{
   {item.name}}</router-link>
    
      <router-view></router-view>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  data() {
    return {
      routers: [
        {