vue3动态路由

# 路由参数

## query参数

`/mime?user=yyds&sex=1`

- ? 就是query参数

## params 参数

`/shpcar/1/haha`

- /1/hahs 就是params 参数

## useRoute

> 作用获取路由配置对象。

- 获取路由参数

~~~vue

<script setup>

import { useRoute } from 'vue-router';

let $route = useRoute();

console.log($route.query);

</script>

~~~

## 路由动态传参

### params

- 1:在路由配置对象中path编写参数key

- 2:更改url地址时候，传参。

~~~js

{

     // 注意：params参数，传参个数上要求严格，不然无法匹配路由

     path:'/shopcar/:id/:title',/

     name:"ShopCar",

     component:()=>import('@/page/ShopCar.vue')

}

~~~

~~~vue

 <!-- 动态传参 path -->

 <!-- <RouterLink :to="{path:'/mine',query:{user:'yyds',sex:1}}">个人中RouterLink> -->

 <!-- 动态传参 name匹配，路由别名方式 -->

 <RouterLink :to="{name:'Mine',query:{user:'yyds',sex:1}}">个人中</RouterLink>

~~~

1.app.js 文件配置

<template>
<nav>
    <ul>
        <li>
            <RouterLink to="/">首页</RouterLink>
        </li>
        <li>
            <!-- 静态params 参数 -->
            <!-- <RouterLink to="/shopcar/1/苹果">购物车</RouterLink> -->
            <!-- 动态传参，注意只能name匹配；不能使用path -->
            <!-- <RouterLink :to="{name:'ShopCar',params:{id:1,title:'苹果'}}">购物车</RouterLink> -->
            <RouterLink :to="{name:'ShopCar',params:data.params}">购物车</RouterLink>

        </li>
        <li>
            <!-- 静态传query参数 -->
            <!-- <RouterLink to="/mine?user=yyds&sex=1">个人中心</RouterLink> -->

            <!-- 动态传参 path -->
            <!-- <RouterLink :to="{path:'/mine',query:{user:'yyds',sex:1}}">个人中心</RouterLink> -->
            <!-- 动态传参 name匹配，路由别名方式 -->
            <RouterLink :to="{name:'Mine',query:{user:'yyds',sex:1}}">个人中心</RouterLink>
            <!-- 动态传参 绑定响应式变量 -->
            <!-- <RouterLink :to="{name:'Mine',query:data.query}">个人中心</RouterLink> -->

        </li>
    </ul>
</nav>
<RouterView />
</template>
<script setup>
import { RouterLink,RouterView } from 'vue-router';
import { reactive } from 'vue';
let data = reactive({
    query:{
        user:'yyds',
        sex:1
    },
    params:{id:1,title:'苹果'}
})

// setTimeout(() => {
//     data.query.user = 'hshshsh'
// }, 5000);
</script>

<style scoped>

nav li{
    display: inline-block;
    list-style: none;
    margin: 10px;
}
nav a {
    text-decoration: none;
    color: black;
    display: inline-block;
    padding: 25px;
    font-size: 16px;
}

/* 路由高亮展示 */
/* 
router-link-active       被激活的路由才会添加router-link-active 模糊匹配的
router-link-exact-active 精准匹配，只能匹配一个路由
 */
.router-active{
    color: red;
}
</style>

2.main.js 文件配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router) // 注意：必须再跟模板之间，才有效
app.mount('#app')

3.router  index.js文件 路由配置

import { createRouter,createWebHistory } from 'vue-router'

export let constom = [
    // 只要新建一个页面组件，就需要添加一个路由配置。
    {
        path:'/',
        name:"Home",
        component:()=>import('@/page/Home.vue')
    }, {
        // 注意：params参数，传参个数上要求严格，不然无法匹配路由
        path:'/shopcar/:id/:title',// params参数
        name:"ShopCar",
        component:()=>import('@/page/ShopCar.vue')
    }, {
        path:'/mine',
        name:"Mine",
        component:()=>import('@/page/Mine.vue')
    },{
        path:"/about",
        name:'About',
        component:()=>import('@/page/About.vue')
    }
]
let router = createRouter({
    history:createWebHistory(),
    routes:constom,
    linkActiveClass: 'router-active', // 自定义被激活路由的class类名 默认名router-link-active
    linkExactActiveClass:'router-exact-active',// 自定义精准激活router-link的class类名 默认 router-link-exact-active
})

export default router

4.page 文件夹

   4.1.About.vue

    4.2.Home.vue

     4.3.Mine.vue

<template>
    <div>
        <h1>个人中心</h1>
        <h2>{{ $route.query.user }}</h2>
    </div>
</template>
<script setup>
import { useRoute } from 'vue-router';
// import { toRefs } from "vue"; 
/**
 * useRoute() 作用获取路由配置对象的hook函数
 */
let $route = useRoute(); // bug:返回代理对象，不是响应式的？？？？
// $route = toRefs($route) //
// console.log($route);

</script>

   4.4.ShopCar.vue

<template>
    <h1>shop car {{ $route.params.id }}</h1>
    <div class="list">
        <ul>
            <li v-for="item in list.shopcar" :key="item.id">
              <h2>名称：{{ item.title }}</h2>
              <h2>价格: {{ item.price }}</h2>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { reactive} from 'vue';
import { useRoute } from 'vue-router'
let $route = useRoute();
console.log($route.params);
let list = reactive({
    shopcar:[
        {
            id:1,
            title:'苹果',
            price:123
        },  {
            id:2,
            title:'波罗蜜',
            price:123
        },  {
            id:3,
            title:'啤梨',
            price:123
        }
    ]
})
</script>
<style scoped>
li{
    margin: 20px;
    background-color: aqua;
}
</style>