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

默认:缓存所有被切换的组件

设置被缓存的组件

被缓存的组件身上会多出两个生命周期函数

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