目录1:vue路由使用1.1:路由的使用1.2:app.vue超链接1.3:子组件1.4:路由出口就是app.vue1.5:路由器配置1.6app使用路由2:嵌套路由3:父组件向子组件参数传递3.1:query方式3.2:params方式3.3:Props传递参数3.4:ts配置4:编程式路由1:vue路由使用在前端开发 中路由Routing是一个核心概念尤其是在单页应用SPA中。它描述的是URL与UI之间的映射关系即当用户访问不同的URL时前端应用会相应地展示不同的界面或组件而无需重新从服务器加载整个页面。2. 单页应用SPASPA指的是一个web网站只加载单个HTML页面所有组件的展示与切换都在唯一的一个页面内完成。它通过路由切换界面或组件以及网络请求数据实现页面的局部刷新或整体更新而无需重新加载整个页面。得益于无需全部重加载SPA具有很多优点尤其是页面切换快减轻服务器压力。通过路径访问然后路由到组件将组件展示出来这就是路由1.1:路由的使用1.2:app.vue超链接template div h1这是vue3demo2/h1 nav h2to访问路由 直接写死/h2 RouterLink to/home首页/RouterLinkbr RouterLink to/about关于/RouterLinkbr RouterLink to/contact联系我们/RouterLinkbr hr !-- h2:to访问路由 通过name访问路由 name是唯一的/h2 router-link :to{ name: home }首页/router-linkbr router-link :to{ name: about }关于/router-linkbr router-link :to{ name: contact }联系我们/router-linkbr h2:to访问路由 通过path访问路由/h2 router-link :to{ path: /home }首页/router-linkbr router-link :to{ path: /about }关于/router-linkbr router-link :to{ path: /contact }联系我们/router-linkbr hr -- /nav router-view/router-view /div /template script setup langts /script style/style1.3:子组件about.vuetemplate div h1关于/h1 /div /template script setup langts import { ref, onBeforeMount, onMounted, onUpdated, onUnmounted, onBeforeUpdate, onBeforeUnmount } from vue const msg ref(关于 页面) console.log(msg.value) //创建组件实例时执行 console.log(创建关于 页面组件实例时执行) //生命周期包含 7步 //创建 组件实例时执行 //挂载 前执行 //挂载 完成后执行 //更新 前执行 //更新 完成后执行 //卸载 前执行 //卸载 完成后执行 // 组件周期函数 onMounted 组件挂载完成后执行 只会执行一次 //挂载前执行 onBeforeMount(() { console.log(关于 页面组件挂载前执行) }) //挂载完成后执行 onMounted(() { console.log(关于 页面组件挂载完成) }) // 组件周期函数 onUpdated 组件更新完成后执行 只会执行一次 //更新前执行 onBeforeUpdate(() { console.log(关于 页面组件更新前执行) }) //更新完成后执行 onUpdated(() { console.log(关于 页面组件更新完成) }) //卸载前执行 onBeforeUnmount(() { console.log(关于 页面组件卸载前执行) }) //卸载完成后执行 onUnmounted(() { console.log(关于 页面组件卸载完成) }) /scriptHome.vuetemplate div h1首页/h1 /div /template script setup langts import { useRoute } from vue-router /scriptContact.vuetemplate div h1联系我们/h1 router-link to/contact/qqQQ/router-linkbr router-link to/contact/weixin微信/router-linkbr hr router-view/router-view /div /template script setup langts import { ref } from vue const msg ref(联系我们 页面) console.log(msg.value) /script1.4:路由出口就是app.vuetemplate div h1这是vue3demo2/h1 nav h2to访问路由 直接写死/h2 RouterLink to/home首页/RouterLinkbr RouterLink to/about关于/RouterLinkbr RouterLink to/contact联系我们/RouterLinkbr hr !-- h2:to访问路由 通过name访问路由 name是唯一的/h2 router-link :to{ name: home }首页/router-linkbr router-link :to{ name: about }关于/router-linkbr router-link :to{ name: contact }联系我们/router-linkbr h2:to访问路由 通过path访问路由/h2 router-link :to{ path: /home }首页/router-linkbr router-link :to{ path: /about }关于/router-linkbr router-link :to{ path: /contact }联系我们/router-linkbr hr -- /nav router-view/router-view /div /template script setup langts /script style/style1.5:路由器配置import { createWebHashHistory, createRouter, createWebHistory } from vue-router // 引入页面组件 该目录是固定的目录不需要改变 一般只有一个ts文件 import Home from /components/Home.vue import About from /components/About.vue import Contact from /components/Contact.vue import ContactQQ from /components/ContactQQ.vue import ContactWeixin from /components/ContactWeixin.vue // 配置路由映射规则 路由的 name 必须全局唯一不能重名 const routes [ //路径规则 { path: /, redirect: /home },// 重定向到首页 { path: /home, name: home, component: Home //懒加载组件 适合中大型项目访问路径的时候再回加载组件防止组件过多启动缓慢 // component: (){ // import(/components/Home.vue) // } },// 首页 { path: /about, name: about, component: About },// 关于页 { path: /contact, name: contact, component: Contact, // 子路由 children: [ { path: qq, name: contactqq, component: ContactQQ }, { path: weixin, name: contactweixin, component: ContactWeixin }, ] },// 联系我们页 ] // 路由实例通过 createRouter 创建 const router createRouter({ // history模式 createWebHistory() 路径不带# 但是会把路径添加到服务器端 比如/home /about /contact // hash模式 createWebHashHistory() 路径带有# history: createWebHistory(), routes }) export default router1.6app使用路由import { createApp } from vue import App from ./App.vue import router from ./router; const appcreateApp(App); app.use(router);//使用路由 app.mount(#app);2:嵌套路由在Contact.vue联系我们的组件下有两个QQ和微信组件template div h1联系我们qq/h1 /div /template script setup langts import { ref } from vue const msg ref(联系我们qq页面) console.log(msg.value) /script template div h1联系我们微信/h1 /div /template script setup langts import { ref } from vue const msg ref(联系我们微信页面) console.log(msg.value) /script使用路径接可以点击记载联系我们组件下的qq和微信两个组件了http://localhost:5173/contact/weixinhttp://localhost:5173/contact/qq3:父组件向子组件参数传递3.1:query方式app组件向联系我们组件传递参数这是app组件template div h1这是vue3demo2/h1 nav h2to访问路由 直接写死/h2 RouterLink to/home首页/RouterLinkbr RouterLink to/about关于/RouterLinkbr RouterLink to/contact联系我们/RouterLinkbr !-- app组件向contact 路由传递参数 query方式 http://localhost:5173/contact?id1001name张三 -- RouterLink :to{ name: contact, query: { id: 1001, name: 张三 } }联系我们传递参数query方式id: 1001, name: 张三 /RouterLinkbr !-- app组件向contact 路由传递参数 param方式 -- RouterLink :to{ name: contact, params: { id: 110, name: 丽丽 } }联系我们传递参数param方式id: 110, name: 丽丽 /RouterLinkbr hr !-- h2:to访问路由 通过name访问路由 name是唯一的/h2 router-link :to{ name: home }首页/router-linkbr router-link :to{ name: about }关于/router-linkbr router-link :to{ name: contact }联系我们/router-linkbr h2:to访问路由 通过path访问路由/h2 router-link :to{ path: /home }首页/router-linkbr router-link :to{ path: /about }关于/router-linkbr router-link :to{ path: /contact }联系我们/router-linkbr hr -- /nav router-view/router-view /div /template script setup langts /script style/style这是联系我们组件template div h1联系我们/h1 !-- 从父页面通过 query 方式接收的参数 -- h2query.id: {{ route.query.id }}/h2 h2query.name: {{ route.query.name }}/h2 !-- 从父页面通过 params 方式接收的参数 -- h2params.id: {{ route.params.id }}/h2 h2params.name: {{ route.params.name }}/h2 !-- params 方式通过路径片段传递参数用模板字符串拼接 -- router-link :to/contact/qq/${queryId}/${queryName}QQ params传递/router-link br !-- props 方式传递固定参数 -- router-link :to{ name: contactweixin, params: { id: 999, name: 哈哈 } }微信props传递固定参数/router-linkbr !-- props 方式传递动态参数从 query 中获取 -- router-link :to{ name: contactweixin, params: { id: queryId, name: queryName } }微信props传递动态参数/router-linkbr hr !-- 子路由出口 -- router-view/router-view /div /template script setup langts import { computed, ref } from vue import { useRoute } from vue-router const msg ref(联系我们 页面) console.log(msg.value) // 获取路由信息 const route useRoute() console.log(route.query:, route.query) console.log(route.query:, route.query.id) console.log(route.query:, route.query.name) // 用 computed 安全地转换 query 参数提供默认值 const queryId computed(() String(route.query.id ?? 0)) const queryName computed(() String(route.query.name ?? 默认)) /script3.2:params方式联系我们组件向qq组件传递参数这是联系我们组件template div h1联系我们/h1 !-- 从父页面通过 query 方式接收的参数 -- h2query.id: {{ route.query.id }}/h2 h2query.name: {{ route.query.name }}/h2 !-- 从父页面通过 params 方式接收的参数 -- h2params.id: {{ route.params.id }}/h2 h2params.name: {{ route.params.name }}/h2 !-- params 方式通过路径片段传递参数用模板字符串拼接 -- router-link :to/contact/qq/${queryId}/${queryName}QQ params传递/router-link br !-- props 方式传递固定参数 -- router-link :to{ name: contactweixin, params: { id: 999, name: 哈哈 } }微信props传递固定参数/router-linkbr !-- props 方式传递动态参数从 query 中获取 -- router-link :to{ name: contactweixin, params: { id: queryId, name: queryName } }微信props传递动态参数/router-linkbr hr !-- 子路由出口 -- router-view/router-view /div /template script setup langts import { computed, ref } from vue import { useRoute } from vue-router const msg ref(联系我们 页面) console.log(msg.value) // 获取路由信息 const route useRoute() console.log(route.query:, route.query) console.log(route.query:, route.query.id) console.log(route.query:, route.query.name) // 用 computed 安全地转换 query 参数提供默认值 const queryId computed(() String(route.query.id ?? 0)) const queryName computed(() String(route.query.name ?? 默认)) /script这是qq组件template div h1联系我们qq/h1 h2联系我们参数qq:{{ route.params.id }}/h2 h2联系我们方式qq:{{ route.params.name }}/h2 /div /template script setup langts import { ref } from vue import { useRoute } from vue-router const msg ref(联系我们qq页面) console.log(msg.value) // 接收路由参数 query const route useRoute() console.log(route.params) // 查询参数对象 console.log(route.params.id) // 查询参数id console.log(route.params.name) // 查询参数name /script3.3:Props传递参数联系我们组件向微信组件穿参数这是微信组件。template div h1联系我们微信/h1 h2联系我们传递参数props方式id:{{ id }}/h2 h2联系我们传递参数props方式name:{{ name }}/h2 /div /template script setup langts import { ref } from vue const msg ref(联系我们微信页面) console.log(msg.value) // 接收路由参数 props defineProps({ id: String, name: String }) /script3.4:ts配置import { createWebHashHistory, createRouter, createWebHistory } from vue-router // 引入页面组件 该目录是固定的目录不需要改变 一般只有一个ts文件 import Home from /components/Home.vue import About from /components/About.vue import Contact from /components/Contact.vue import ContactQQ from /components/ContactQQ.vue import ContactWeixin from /components/ContactWeixin.vue // 配置路由映射规则 路由的 name 必须全局唯一不能重名 const routes [ //路径规则 { path: /, redirect: /home },// 重定向到首页 { path: /home, name: home, component: Home //懒加载组件 适合中大型项目访问路径的时候再回加载组件防止组件过多启动缓慢 // component: (){ // import(/components/Home.vue) // } },// 首页 { path: /about, name: about, component: About },// 关于页 { path: /contact, name: contact, component: Contact, // 子路由 children: [ // 子路由 传递参数 // 路由参数 传递参数的值是动态的这里的是params 方式传递参数 //http://localhost:5173/contact/qq/1001/%E5%BC%A0%E4%B8%89 //http://localhost:5173/contact/qq/undefined/undefined { path: qq/:id?/:name?, name: contactqq, component: ContactQQ }, { path: weixin/:id?/:name?, name: contactweixin, component: ContactWeixin ,props: true}, ] },// 联系我们页 ] // 路由实例通过 createRouter 创建 const router createRouter({ // history模式 createWebHistory() 路径不带# 但是会把路径添加到服务器端 比如/home /about /contact // hash模式 createWebHashHistory() 路径带有# history: createWebHistory(), routes }) export default router4:编程式路由通过按钮或者是定时跳转到新的组件template div h1首页/h1 button clickrouter.push({ name: contact })跳转到联系我们/button /div /template script setup langts import { useRouter } from vue-router import { onMounted } from vue // 获取路由实例 const router useRouter() //挂载后执行 onMounted(() { console.log(router:, router) //5秒啊后跳转到联系我们页面 setTimeout(() { //push 跳转到联系我们页面 router.push({ name: contact }) }, 5000) console.log(Home组件挂载后执行) }) /script