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

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

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

相关推荐
清木!6 分钟前
数据仓库详解
笔记
@小红花40 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵42 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性