文章目录
前言
一、多级路由的作用？
二、使用步骤
1.引入库
2.搭建环境
总结
前言
在之前的一级路由中，我们解决了原生中的抖动问题，以及代码冗余问题，但是现在还有一个问题没有解决，那就是如果有多个需要跳转的那该怎么办呢？
一、多级路由的作用？
其实很简单，只要会以一级路由那么后面的多级路由也不是什么难问题，主要我们得会使用路由的嵌套，所谓嵌套就是一个路由规则里面可能还有一个路由规则，依次进行。
二、使用步骤
1.引入库
还是一样的操作，Vue2的下载如下版本：
npm i vue-router@3
Vue3的下载如下版本：
npm i vue-router@4
2.搭建环境
代码如下（示例）：
export default new Vuerouter({
routes:[
{
path:'/liebiao',
component: liebiao,
children:[//多级路由
{
name:'zhanshi',
path:'zhanshi/:id/:name',
component:zhanshi,
// props:true//prpos为真只能接收paprem的参数
// prpos的第二种写法,不管是query参数还是params参数都可以接收(常用)
props($route){//这里也可以解构赋值{params}
return {
iid:$route.params.id,
nname:$route.params.name
}
}
}
]
},
{
path:'/zhuye',
component:zhuye,
}
]})
main.js文件配置：
import Vue from 'vue'
import App from './App.vue'
import Vuerouter from 'vue-router'
import router from './router/index.js'
Vue.config.productionTip = false
Vue.use(Vuerouter)
new Vue({
el:'#app',
render: h => h(App),
router:router,
})
然后就是所对应的各个组件：
- 我是列表页
- 点击去展示
- 我来展示
- {{$route.params.id}}
- {{$route.params.name}}
- {{name}}
- {{id}}
- {{iid}}
- {{nname}}
name:'zhanshi',
mounted(){
console.log(this);
},
props:['name','id','iid','nname']}
我是主页
最终看一下运行效果：
总结
本次主要的使用了多级路由来实现多级切换效果，主要就是在一级路由的基础上配置children属性，他是一个数组，里面都是他的下级路由
