菜鸟学习vue3笔记-vue3 router回顾

1、路由router

pnpm i  vue-router

2、创建使用环境

1.src下创建 router文件夹、里面创建index.ts文件

//创建一个路由暴露出去//1.引入createRouter
import { createRouter, createWebHistory } from "vue-router";// import Home  from '../components/Home.vue'// import Goods from '../components/Goods.vue'
// import Mine from "../components/Mine.vue";//2.创建路由器
const router = createRouter({history: createWebHistory(),routes: [{path: "/home",component: ()=>import ("../components/Home.vue"),// component:Home},{path: "/goods",component: ()=>import('../components/Goods.vue'),// component:Goods},{path: "/mine",component: ()=>import('../components/Mine.vue'),// component:Mine},{path:'/',redirect:'/home',}],
});
export default router

2.main.ts文件中配置

//引入路由器import router from './router'const app=createApp(App)//使用路由器app.use(router)

3.页面中使用 RouterView, RouterLink

<template><div class="box"><div class="nav-box"><RouterLink to="/home">首页</RouterLink><RouterLink to="/goods">商品</RouterLink><RouterLink to="/mine">我的</RouterLink></div><div class="content-box"><RouterView></RouterView></div></div>
</template><script setup lang="ts">
import { RouterView, RouterLink } from "vue-router";
</script><style lang="scss" scoped>
.box {.nav-box {background-color: red;// border: 1px solid #00ff00;display: flex;> a {flex: 1;border: 1px solid #00ff00;text-align: center;}}
}
</style>

to 的两种写法

<RouterLink to="/home">首页</RouterLink><RouterLink to="/goods">商品</RouterLink><RouterLink to="/mine">我的</RouterLink>

<RouterLink:to="{path: '/mine',}">我的</RouterLink>

命名路由

{path: "/home",name:'homePage',component: ()=>import ("../pages/Home.vue"),// component:Home},{path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'/detial',component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},{path: "/mine",name:'mine',component: ()=>import('../pages/Mine.vue'),// component:Mine},<RouterLink:to="{name: 'mine',}">我的</RouterLink>

嵌套路由

  {path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'detial',component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},<template><div class="box"><div class="left"><ul><li v-for="(item, index) in goods" :key="index"><RouterLink to="/goods/detial"> {{ item }}</RouterLink></li></ul></div><div class="right"><RouterView></RouterView></div></div>
</template>

query 传参

  <!-- 第一种写法 --><RouterLink :to="`/goods/detial?index=${index}&title=${item}`">{{ item }}</RouterLink><!-- 第二种写法 --><RouterLink:to="{path: '/goods/detial',query: {index: index,title: item,},}">{{ item }}</RouterLink><!-- <template><div>商品详情{{ router.query.index }}---{{ router.query.title }}</div>
</template> -->
<template><div>商品详情{{ query.index }}---{{ query.title }}</div>
</template><script setup lang="ts">
import { toRefs } from "vue";
import { useRoute } from "vue-router";
let router = useRoute();// console.log(useRoute().query);let { query } = toRefs(router);// let { index, title } = toRefs(useRoute().query);
</script><style lang="scss" scoped></style>

params 传参

 {path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'detial/:index/:title',component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},<router-link :to="`/goods/detial/${index}/${item}`">{{ item }}</router-link><template><div>商品详情{{ params.index }}---{{ params.title }}</div>
</template><script setup lang="ts">
import { toRefs } from "vue";
import { useRoute } from "vue-router";
let router = useRoute();console.log(router);let { params } = toRefs(router);

//这种写法必须写name path报错
{path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'detial/:index/:title',name:'xiangqing',component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},<!-- 第二种写法 --><router-link:to="{// path: '/goods/detial', //path 会报错name: 'xiangqing',params: {index: index,title: item,},}">{{ item }}</router-link>

路由组件props（params 传参）

{path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'detial/:index/:title?',name:'xiangqing',props:true, //开启 只处理params参数component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},<template><div>商品详情{{ index }}---{{ title }}</div>
</template><script setup lang="ts">
import { toRefs } from "vue";defineProps(["index", "title"]);//接受属性
// import { useRoute } from "vue-router";
// let router = useRoute();// console.log(router);// let { params } = toRefs(router);// let { index, title } = toRefs(useRoute().query);
</script><style lang="scss" scoped></style>

query传参 这样设置

props(router){return router.query},

编程式导航

router-link 本质是a 标签<script setup lang="ts">
import { onMounted } from "vue";import { useRouter } from "vue-router";let router = useRouter();onMounted(() => {setTimeout(() => {router.push("/mine");}, 3000);
});<button @click="lookDetail(item, index)">点击查看</button>let lookDetail = (item, index) => {router.push({name: "xiangqing",params: {index: index,title: item,},});
};