嵌套路由及路由传参

目录

嵌套路由

路由的传参

编程式导航

如何通过编程式导航传参

---

嵌套路由

二级路由(子路由）

嵌套路由就是在某个规则下再写一个规则，相应的路由出口就是在该父规则对应的组件写路由出口

<router-view></router-view>

 {
      path: '/dashboard',
      component: LayoutComp,
      redirect: '/dashboard/user',
      // 子路由
      children: [
        {
          path: 'user', // path:''表示默认的二级路由
          component: UserComp
        }, {
          path: 'attendance',
          component: AttendanceComp
        }
      ]

    },

二级路由出口

LayoutComp.vue

<template>
  <div class="box">
    <router-link to="/dashboard/user">用户管理</router-link>
    <router-link to="/dashboard/attendance">考勤管理</router-link>
    <!-- 二级路由出口 -->
<router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.box{
    width: 100%;
    height: 100vh;
    background-color: skyblue;
}
</style>

路由的传参

动态路由传参

$route.params.id

路由传参

1.动态路由传参------声明式导航传参

路由规则path ----------> /article/:id

导航链接

 <router-link to=" /article/1">查看第一篇文章</router-link>

组件获取参数：this.$route.params.id（路由规则path：名字，this.$route.params.名字)

export default {
created ( ) {
	console.log(this.$route.params.aid)
	}
}

2.查询参数传参

路径？参数1=值 &参数2=值

路由规则 path -----> /路径

//路由规则配置
{
path: '/article' ,
component: ArticleDetail
},

导航链接

<router-link to=" /article?id=1">查看第一篇文章</router-link>

<router-link to=" /article?id=1 & name=lisi">查看第一篇文章</router-link>

组件获取

this. $route.query.id

$route.query

this.$route.query.id

可选动态路由参数

{
/*?可选动态路由参数*/
    path: ' /article/ : id? ',
    component: ArticleDetail
},

编程式导航

导航：1.声明式导航

router-link 组件实现的组件跳转

2.编程式导航

通过js代码实现跳转

methods: {
	login () {
        //跳转
	this.$router.push( ' /login ' )
	}
}

$route 表示获取路由信息，路由参数，查询参数，当前匹配的路由信息

$router 提供方法（push()跳转 back()后退 go(1/-1)跳转后退 forword() ）

为什么$route,$router可以使用？

$route,$router是定义在原型上，每个组件是vue实例

push()跳转 back()后退 go(1/-1)跳转后退 forword()

如何通过编程式导航传参

1动态路由传参 this.$router. push( ' /article/2 ' )

组件获取参数: this. $route.params .id

{
	path: '/article/ : id ' ,
    component: ArticleDetail
},

goArticleDetail ( ) {
    //1.字符串形式
//this. $router. push('/ aiticle/2')
    //2、对象形式   注意path不能与params一起使用
    this.$router.push({path:'/article/5'})
}

2查询参数传参数 this. $router. push( ' / article?id=2 & name=zs' )

或写完整写法 this.$router.push(path:‘路径', query: {参数1:值,参数2:值,. . .}

路由规则path -> /路径 组件获取 this. $route.query.id

{
	path: '/article ' ,
    component: ArticleDetail
},

goArticleDetail ( ) {
    //1、字符串形式
this. $router. push('/ article?id=2')
}

完整写法

goArticleDetail ( ) {
    //完整写法
	this. $router. push({
    //2、对象形式   path能与query一起使用
	//path:'/ article?id=2'
        path:'/article',
        //查询参数
        query:{
            id:1
        }
	})
}

参数多写成对象的形式