Java登陆第三十九天——Router编程式路由，路由传参

在上一章节，<router-link to="/left">左</router-link>

这种这种路由,to中的内容目前是固定的。被称之为声明式路由（或普通路由）

编程式路由

编程式路由，可以按需决定某组件的路由地址。

vue-router提供了一个函数：useRouter

语法格式如下：

//该函数的返回值是一个路由对象。
let router = useRouter()
//确定路由地址
router.push('/路由地址')
router.push({path:'/路由地址'})

编程式路由的特点：

1. 哪个组件调用push函数，就决定哪个组件的路径映射。

2. 需要从vue-router导入useRouter函数。

3. 还是需要编写路由配置文件。

4. 编程式路由只是代替了router-link标签。

5. 只能说是编程式路由，不是动态路由！！！不是动态路由！！！

依旧使用上一章栗子

修改App.vue

<script setup>
import {useRouter} from 'vue-router'

let router = useRouter();

let right = ()=>{
  router.push({path:'/right'})
}
</script>

<template>
  <router-link to="/left">左</router-link>
  丨
  <button @click="right()">右</button>
  <router-view></router-view>
  <h3>APP尾部</h3>
</template>

<style scoped>
</style>

效果展示

左是使用声明式路由，右是使用编程式路由。

路由传参

指的是在路径中传参，使用特定的方式读取。

vue-router提供了一个函数：useRoute

注意，不是编程式路由userRouter
注意，不是编程式路由userRouter
注意，不是编程式路由userRouter

语法格式如下：

//获取路径传参
useRouter().params

//获取键值对传参
useRouter().query

路径传参

路由传参的特点：

1. 若使用路径传参需要在路由配置文件中，映射地址后使用占位符
   • {path: '/left/:id/:name', component: Left}

2.需要从vue-router导入useRoute函数。

3. 在接收参数的组件中使用函数useRoute。

栗子

testRouter.js

import {createRouter, createWebHashHistory} from 'vue-router'
import Left from '../components/left.vue'
import Right from '../components/right.vue'

//传递一个匿名对象传参
const testRouter = createRouter({
    //history对象
    history: createWebHashHistory(),
    /*
    routers是一个数组，数组内是组件与映射路径对象。
        键path的值是映射路径URL，键component的值是组件名。
     */
    routes: [
        {path: '/left/:id/:name', component: Left},
        {path: '/right/:id/:name', component: Right}
    ]
});
//默认导出，在需要的地方导入该配置文件即可。
export default testRouter;

App.vue

<script setup>
import {useRouter} from 'vue-router'

let router = useRouter();

let right = (pid, pname) => {
  //等价于<router-link to="/right/1/zhangsan">
  router.push({path: `/right/${pid}/${pname}`})
}
</script>

<template>
  <router-link to="/left/0/lisi">左</router-link>
  丨
  <button @click="right(1,'zhangsan')">右</button>
  <router-view></router-view>
  <h3>APP尾部</h3>
</template>

<style scoped>
</style>

仅left.vue

<script setup>
import {useRoute} from 'vue-router'

let route = useRoute();
</script>

<template>
<h3>我是left.vue，参数是</h3>
  {{route.params.id}}
  {{route.params.name}}
</template>

<style scoped>
</style>

效果展示

键值对传参

键值对传参的特点：

1. 不需要在配置文件中编写占位符

2. 需要从vue-router导入useRoute函数。

3. 在接收参数的组件中使用函数useRoute。

4. 其他使用方式相同，只不过从

//获取路径传参
useRouter().params
变成👇
//获取键值对传参
useRouter().query

这里不做栗子展示。