vue2(笔记)4.0vueRouter.声明式/编程式导航以及跳转传参.重定向

---vueRouter

五个步骤:

两个核心:

{path:路径,component:组件}

二级路由:

1.在主页路由对象中,添加children配置项 2.准备路由出口

示例代码:
复制代码
  {
      path: '/',
      component: layout,
      redirect: 'home',
      children: [
        {
          path: '/home',
          component: home
        },
        {
          path: '/card',
          component: card
        }
      ]
    },
在layout页面下配置二级路由出口
复制代码
<template>
    <div>
      <router-view></router-view>
      <!-- 二级路由 -->
      <van-tabbar  route  active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/card" icon="apps-o">分类页</van-tabbar-item>
    </van-tabbar>
    </div>
  </template>

---声明式导航

使用vue-router会默认添加两个class属性,可设置高亮样式

两个高亮类名的区别:

--查询参数传参

--动态路由传参

说明: '/search/:words',表示必须要传参数。

如果不传参数,也希望匹配,可以加个可选符"?"

如:'/search/:words?'

--两种传参的总结

要在js中获取传参的话,要在获取前加上this 如: this.$route.query.参数名

---vue重定向(设置默认打开的路由路径)

---路由404

---vue路由模式设置

---编程式导航

1.path路径跳转

2.name命名路由跳转

--path路径跳转传参 (推荐)

1.query传参:

接收:

-----------------------------------------------------------------------------------------------------------------

2.动态路由跳转(先配置动态路由):

接收:

--name命名路由传参

1.query传参:

接收:

-----------------------------------------------------------------------------------------------------------------

2.动态路由传参:

接收:

--两种传参的总结

---路由返回 $router.back()

---组件缓存keep-alive

默认:缓存所有被切换的组件
设置被缓存的组件
被缓存的组件身上会多出两个生命周期函数

默认的周期函数会失效,得使用下面两个新的生命周期函数

相关推荐
_Kayo_1 分钟前
VUE2 学习笔记8 v-text/html/cloak/once/pre/自定义
笔记·学习
星星火柴9363 分钟前
开发笔记 | 实现人物立绘的差分效果
笔记·unity·游戏程序·优香
一只小风华~9 分钟前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰13 分钟前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
张元清14 分钟前
揭秘JS事件循环:一道字节跳动面试题带你深入理解async/await、Promise与RAF
前端·react.js·面试
杨DaB16 分钟前
【SpringMVC】MVC中Controller的配置 、RestFul的使用、页面重定向和转发
java·笔记·后端·学习·spring·mvc·restful
KenXu18 分钟前
F2C-Chrome插件-Figma免费的DevMode来了!
前端
北海几经夏23 分钟前
React组件中的this指向问题
前端·react.js
程序媛李李李李李蕾30 分钟前
你不能直接用现成的吗?整个前端做笔记管理工具真是折腾人
javascript·vue.js·后端
passer98136 分钟前
列表项切换时同步到可视区域
前端