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

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

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

相关推荐
gnip2 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
前端橙一陈3 小时前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~3 小时前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技013 小时前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio4 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
哈基鑫4 小时前
深度学习之图像分类笔记
笔记·深度学习·分类
润 下4 小时前
C语言——深入理解函数声明定义和调用访问
c语言·开发语言·经验分享·笔记·程序人生·其他
家里有只小肥猫5 小时前
react 初体验2
前端·react.js·前端框架
慧慧吖@5 小时前
前端发送请求时,参数的传递格式
前端
L李什么李5 小时前
HTML——使用表格制作简历
前端·javascript·html