vue-router

solitudeYu
150 阅读3分钟

首先vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容，这就是spa（单页面富应用）

优点: 良好的交互体验,用户不需要刷新页面,页面显示流畅, 良好的前后端工作分离模式,减轻服务器压力, 缺点: 不利于SEO,初次加载耗时比较多

###vue-router有两种模式，hash模式和history模式 ###1.路由的基本参数和属性

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/" tag="span" replace>Home</router-link>|
      <router-link to="/about" tag="span" replace>About</router-link>
      <button @click="click">测试</button>
      <!--to  路由的跳转路径，跟index.js中的路由映射表相匹配 -->
      <!-- tag 设置跳转的路由标签类型 -->
      <!-- replace 页面切换，禁止使用前进后退的按钮 -->
    </div>
    <router-view />
  </div>
</template>


<script>
export default {
  methods:{
    click(){
      // vue-router3.1之后，push需要添加回调函数，负责控制台会报错
      // this.$router.push({path:'/about'}).catch(err => {err})
      //repalce跳转浏览器不能返回
      this.$router.replace({path:'/about'}).catch(err => {err})
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

/* 点击切换标签改变标题的颜色 */
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

###2.路由传参的两种方式 ####1.传递单独参数 ①.路由配置里面传参 index.js中

image.png
②.页面中传递
image.png
③.页面中间接收
image.png
####2.query传参 统一资源定位符 以https://wiki.hk.wjbk.site:80/w/index.php?title=Special:随机页面为例, 其中：

  1. https，是协议；
  2. wiki.hk.wjbk.site，是服务器；
  3. 80，80超文本传输协议文件的常用网络端口号，因此一般也不必写明；
  4. /w/index.php，是路径；
  5. ?title=Special:随机页面，是询问，相当于query对象，就是传递的参数。 ①传参
    image.png
    ②取值
    image.png

###3.路由懒加载 页面打包后通常放在一个js文件中，但是会造成文件非常大。 请求服务器会耗费很长时间，而且用户会出现短暂的空白。 路由懒加载就是将路由对应的组件打包成一个个js代码块。 只有这个路由被访问的时候，才加载相应的组件。

image.png
###4.路由嵌套 ①映射表配置 注意，子路由path前面不需要加斜线，表示路径会拼上上级路由的路径
image.png
②页面调用
image.png
③嵌套路由，父级路由要去除name属性，否则vue会发出警告
image.png
image.png

###5.路由的全局导航守卫 1）前置守卫

image.png
image.png
2）后置守卫
image.png
###6.keep-alive组件 keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：

<keep-alive>
  <router-view>
    <!-- 所有路径匹配到的试图组件都会被缓存！ -->
  </router-view>
</keep-alive>

现在有这样一个需求：首页正正在显示的是被嵌套的消息路由，当我们点击其他页面，又重新点击首页时，让首页仍然显示被嵌套的消息路由

图片.png
图片.png

  1. 先取消嵌套路由的默认路径

图片.png
图片.png

  1. 在 App.vue 中使用 <keep-alive></keep-alive> 包裹 <router-view/>

图片.png
图片.png

  1. 在 Home.vue 中记录离开之前的路径

图片.png
图片.png

keep-alive 还有两个非常重要的属性: • include - 字符串或正则表达，只有匹配的组件会被缓存 • exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存 让部分组件不缓存：

<keep-alive exclude="Profile,User"><router-view/></keep-alive>
avatar
文章
阅读
粉丝