iOS vue路由keepalive添加后跳转返回不能滑动 vue2路由跳转

转载

mob64ca1404476b 2023-11-17 15:23:57

目前会一些简单的路由规则，先记录上。

参考：Vue2全家桶之二：vue-router（路由）详细教程，看这个就够了 - 简书

由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
传统的页面应用，是用一些超链接来实现页面切换和跳转的。
在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。
路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

有的小伙伴会有疑虑，为什么我们不能像原来一样直接用a标签编写链接呢？
因为我们一般用Vue做的都是单页应用，只有一个主页面index.html，所以你写的<a></a>标签是不起作用的，要使用vue-router来进行管理。

1.安装vue-router

在用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如果选择y，后面下载依赖会自动下载vue-router。

如果未下载vue-router依赖，则手动安装在项目中。

【安装】

npm install vue-router

2.定义组件

搭建项目时，已经自动生成一个HelloWorld.vue，我选择再新建两个vue文件来增加路由跳转的页面。

2.1 新建Home.vue

<template>
  <div>这是Home页面</div>
</template>


<script>
    export default {
        name: "Home"
    }
</script>


<style scoped>


</style>

2.2 新建About.vue

<template>
  <div>这是About页面</div>
</template>


<script>
    export default {
        name: "About"
    }
</script>


<style scoped>


</style>

3.配置路由文件src/router/index.js

我的项目时在用脚手架搭建的过程中选择了下载vue-router依赖，所以我的文件目录中直接有src/router/index.js，如果下载了vue-router后没有改文件夹，则手动在src文件目录下新建/router/index.js。

完成后，配置路由文件。

import Vue from 'vue'                  //必须导入
import Router from 'vue-router'        //必须导入
import HelloWorld from '../components/HelloWorld'
import Home from "../components/Home"
import About from "../components/About"
Vue.use(Router)    //Vue使用Router
export default new Router({     //导出
  routes: [
    {
      path: '/',       //路径
      name: 'Home',    //命名
      component: Home, //注册的页面
    },
    {
      path:'/helloworld',
      name:'HelloWorld',
      component:HelloWorld,
      children:[       //子路由
        {
          path:'about',
          name:'About',
          component:About
        }
      ]
    }
  ]
})