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 默认:缓存所有被切换的组件

设置被缓存的组件

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

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