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

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

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

相关推荐
天水幼麟2 小时前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
小小小小宇3 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习4 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
天水幼麟4 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
绿皮的猪猪侠4 小时前
算法笔记上机训练实战指南刷题
笔记·算法·pta·上机·浙大
沧海一笑-dj4 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js