Vue学习第六天

phy_winter
307 阅读5分钟

路由模块封装

路由的封装抽离

问题：所有的路由配置都堆在main.js中合适吗

目标：将路由模块抽离出来

好处：拆分模块，利于维护

方案：把所有有关路由的文件，统一放在router文件夹下的index.js中，相当于把这部分内容移到一个单独的模块文件

tip：

  • 在index.js中由于有Vue.use(VueRouter)安装，但是index.js中没有，所以需要在里面导一次Vue，import Vue from 'vue'
  • 在index.js里导入了Vue之后，也需要导出，用export default router，这样在main.js中就可以导入了
  • 在rouer中的index中找views里的vue文件，需要先../回到上一层，不然会报错
  • 还有一种方法就是可以 快速引入组件，vue支持 绝对路径 的写法，即@/代表从src文件夹下开始找

router-link声明式导航

实现导航高亮效果

vue-router提供了一个全局组件router-link去取代a标签

但它本质解析出来还是a标签，只不过多了一些属性

原来通过a标签实现跳转（配置herf属性指定路径，路径加#）

    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div>

现在用router-link是（配置to属性去指定路径）

    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>

但它与a标签不同的是：router-link可以高亮显示，默认就会提供高亮类名，可以直接设置css高亮样式

这是因为router-link自动给当前导航添加了两个高亮类名 ​

  • router-link-active 模糊匹配（用的多）
    • to="/my"可以匹配/my、/my/a、/my/b，也就是说只要是/my开头的路径都可以匹配到
    • 比如：​
  • router-link-exact-active 精确匹配
    • to="/my"只能匹配/my

但是如果嫌上面类名太长了，想自定义怎么办？

const router = new VueRouter({
  routes:[...],
  linkActiveClass:"类名1",
  linkExactActiveClass:"类名2"
})

跳转传参

目标：在跳转路由时，进行传值

​

  1. 查询参数传参（比较适合传多个参数）
  • 语法格式为
    • to="/path?参数名key=值&参数名2=值"
  • 对应页面组件接收传递过来的值：{{}}
    • $route.query.参数名key

如果在当前vue组件中发请求，应该在export default里写created来获取参数

 created(){
    //在created中（也就是在js中）获取路由参数，则需要通过this.$route.query.参数名
    //如果在模块里可以省略this{{}}
    console.log(this.$route.query.key)
  }
  1. 动态路由传参（传单个参数比较方便）
  • 配置动态 路由（/：）

​

可以匹配/search/：qita，/search/：biede一些其他的路径

  • 配置导航链接
    • to="/path/值"
  • 对应页面组件 接收 传递过来的值{{}}
    • $route.params.参数名words
  • 动态路由参数的可选符 ​

Vue路由——重定向

问题是：网页打开，url默认是/path，未匹配到组件时，会出现空白

重定向：匹配到path后，强制跳转path路径

说明：比如你一打开网页，默认未匹配到组件的话，你页面就是空白，只有你点击上面的导航时，才能匹配到你对应的组件。但是我们现在是想让你一进入网页就跳转到某个界面，所以这就用到了重定向

语法：在routes里再写一句，第一个‘/要匹配的路径’

path：‘/’，redirect：‘/重定向的路径’

const router = new VueRouter({
  routes:[...],
})

Vue路由-404

这个要写在routes里的最后一条，作为其他都走不了最后走的一条路径

作用：当路径找不到匹配时，给个提示页面

位置：配在路由最后

最后：{path："*"，component：NotFound（这可以写任意的路径模块）}

Vue路由-模式设置

问题：路由的路径看起来不自然，有#，能否切成真正路径模式？

  • hash路由（默认），带井号#
  • history路由（常用），不带，但是需要后台配置访问规则

写一句mode："history"就可以了

const router = new VueRouter({
  mode："history"
  routes:[...],
})

编程式导航

基本跳转

问题：点击按钮跳转如何实现

两种语法：

  1. path路径跳转（简单方便）
    • 给按钮先注册点击事件
    • 然后在下面的methods里的方法里写this.$router.push('路由路径')

完整写法是：

this.$router.push({
   path：'路由路径'
})
  1. name命名路由跳转（适合path路径长的场景）
this.$router.push({
   name：'路由名'
})

用名字跳转，首先要起名字，在routes里的；路径前写

 routes:[
    { path: '/find', component: Find },
    //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    { name:'/my',path: '/my', component: My },
    { path: '/friend', component: Friend },
  ],

路由传参

问题：在你点击搜索按钮后，你不仅想要跳转，你还想带着搜索框里的内容也传过去，所以跳转需要传参如何实现？ 刚刚上面讲的两种跳转方式（path、name），对于之前讲的两种传参方式都支持（查询传参、动态传参）

1. path路径跳转传参

  • 查询路由传参query？
this.$router.push('/路径？参数名1=参数值1 & 参数2=参数值2')

this.$router.push({
  path：'/路径'，
  query：{
     参数名1：'参数值1'，
     参数名2：'参数值2'
  }
})

接收参数就是：$route.query.参数名

  • 动态路由传参/
this.$router.push('/路径/参数值')
this.$router.push({
   path：'/路径/值'，
})

接收参数就是：$route.params.参数名

2. name路径跳转传参

  • 查询路由传参
//只有这一种写法
this.$router.push({
  name：'路由名字'，
  query：{
     参数名1：'参数值1'，
     参数名2：'参数值2'
  }
})

接收参数就是：$route.query.参数名

  • 动态路由传参
this.$router.push({
   name：'路由名字'，
   params：{
      参数名：'参数值'
   }
})

接收参数就是：$route.params.参数名

配置嵌套路由（一级、二级）

比如你现在有一个这样的案例： ​

  • 通过children配置项，可以配置嵌套子路由
  • 二级路由的路由出口在一级路由里写
routes:[
    {
      path: '/find', 
      component: Find，
      children：[
        {
           path:'/qita',
           component:qita
        }
      ]
    },
    { 
      path: '/my', 
      component: My
    }
  ],

返回上一个页面

@click="$router.back()"

组件缓存——keep-alive

问题：从首页点进某一条的详情页后，又点返回，数据重新加载了——> 希望回到原来的位置

原因：路由跳转后，组件被销毁了，返回回来的组件又重建了，所以数据重新被加载了

解决：利用keep-alive将组件缓存下来<keep-alive></keep-alive>

keep-alive是什么？

  • keep-alive是Vue的内置组件，当它包裹动态组件（router-view）时，会缓存不活动的组件实例，而不是销毁它们
  • keep-alive是一个抽象组件：它自身不会渲染成一个dom元素，也不会出现在父组件链中

keep-alive的优点

  • 在组件切换过程中，把切换出去的组件保留在内存中，防止重复渲染dom
  • 减少加载事件及性能消耗，提高用户体验感

但是由于并不是每个页面都需要缓存，所以keep-alive有以下几个属性（前两个不会同时用）

  1. ：include：组件名数组，只有匹配的组件会被缓存
  2. ：exclude：组件名数组，任何匹配的组件都不会被缓存
  3. ：max：最多可以缓存多少组件实例
  • 组件缓存了之后，就不会执行created，mounted，destroyed等钩子了
  • 所以提供了actived和deactived钩子

基于vue-cli自定义创建路由架子

因为我们不想每次写一个项目都一步一步去搭router（或者其他）架子

  1. 在E盘（或者别的盘），按住shift，进入powershell窗口
vue create 项目名
  1. 进入选择，选择最下面的自定义,Manually select features
  2. 选择，空格是选中或取消 ​
  3. 选vue2
  4. n（就是hash模式）
  5. 选less
  6. 选第三个，“无分号规范（标准化）”
  7. 选Lint on save
  8. 选 In dedicated config files（将配置文件单独放在文件中）
  9. n（不保存）

ESLint自动修正代码规范错误

已装，很安心

​

然后在设置里配置一下，把下面这个复制进去

    //当保存时，eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    //保存代码，不自动格式化
    "editor.formatOnSave": false
avatar
文章
阅读
粉丝