网站首页菜单栏模块怎么做的,郑州手机网站推广外包,网络域名的网站,宣传片制作公司费用Vue3学习02 路由 路由基本使用两个注意点路由器工作模式to的两种写法【命名路由】【嵌套路由】路由传参query参数params参数 路由规则的props配置replace属性编程式导航重定向 路由
路由器检测到路由的变化#xff0c;路径变化#xff0c;对应的组件也变化
基本使用
想使用… Vue3学习02 路由 路由基本使用两个注意点路由器工作模式to的两种写法【命名路由】【嵌套路由】路由传参query参数params参数 路由规则的props配置replace属性编程式导航重定向 路由
路由器检测到路由的变化路径变化对应的组件也变化
基本使用
想使用路由
① 确定导航区、展示区
② 请来路由器 npm i vue-router
③ 指定路由的具体规则什么路径、对应着什么组件
在 src 底下 创建一个文件夹 router/index.ts (vue3中是ts不是js)
④ 形成一个一个的 .vue 文件
配置路由 src/router/index.ts
// 创建一个路由器 并暴露出去// 第一步 引入 createRouter
import {createRouter,createWebHistory} from vue-router// 引入一个一个可能要呈现的组件
import Home from /components/Home.vue;
import News from /components/News.vue;
import About from /components/About.vue;// 第二步 创建路由器
const router createRouter({history:createWebHistory(), // 路由器的工作模式routes: [{path: /home,component: Home,},{path: /news,component: News,},{path: /about,component: About,}]
})export default router main.ts
import {createApp} from vue
import App from ./App.vue// 引入路由器
import router from ./router// createApp(App).mount(#app)// 创建应用
const app createApp(App)
// 使用路由器
app.use(router)
// 挂载
app.mount(#app)app.vue RouterLink、RouterView
templatediv classapph2 classtitleVue路由测试/h2!-- 导航区 --div classnavigateRouterLink to/home active-classxiaozhupeiqi首页/RouterLinkRouterLink to/news active-classxiaozhupeiqi新闻/RouterLinkRouterLink to/about active-classxiaozhupeiqi关于/RouterLink/div!-- 展示区 --div classmain-contentRouterView/RouterView/div/div
/templatescript langts setup nameApp/script两个注意点 路由组件通常存放在pages 或 views文件夹一般组件通常存放在components文件夹。 通过点击导航视觉效果上“消失” 了的路由组件默认是被卸载掉的需要的时候再去挂载。
通过生命周期函数验证 onMounted 、onUnMounted
路由器工作模式 import {createRouter,createWebHistory,createWebHashHistory} from ‘vue-router’ history模式 优点URL更加美观不带有#更接近传统的网站URL。 缺点后期项目上线需要服务端配合处理路径问题否则刷新会有404错误。 const router createRouter({history:createWebHistory(), //history模式/******/
})hash模式 优点兼容性更好因为不需要服务器端处理路径。 缺点URL带有#不太美观且在SEO优化方面相对较差。 const router createRouter({history:createWebHashHistory(), //hash模式/******/
})to的两种写法
!-- 第一种to的字符串写法 --
router-link active-classactive to/home主页/router-link!-- 第二种to的对象写法 --
router-link active-classactive :to{path:/home}Home/router-link对象写法to的前面必须加一个冒号表示绑定实际路径为 双引号内部的对象。如果不写绑定就是字符串
【命名路由】
作用可以简化路由跳转及传参后面就讲。
给路由规则命名
routes:[{name:zhuye, // 给路由命名path:/home,component:Home},{name:xinwen, // 给路由命名path:/news,component:News,},{name:guanyu, // 给路由命名path:/about,component:About}
]跳转路由
!--简化前需要写完整的路径to的字符串写法 --
router-link to/about跳转/router-link!--简化后直接通过名字跳转to的对象写法配合name属性 --
router-link :to{name:guanyu}跳转/router-link【嵌套路由】
1、编写News的子路由Detail.vue
2、配置路由规则使用children配置项
children配置项里面的路径 path 不加斜杠
const router createRouter({history:createWebHistory(),routes:[{name:zhuye,path:/home,component:Home},{name:xinwen,path:/news,component:News,children:[{name:xiang,path:detail, //这里不写斜杠component:Detail}]},{name:guanyu,path:/about,component:About}]
})
export default router3、跳转路由记得要加完整路径
router-link to/news/detailxxxx/router-link
!-- 或 --
router-link :to{path:/news/detail}xxxx/router-link4、记得去Home组件中预留一个router-view
templatediv classnewsnav classnews-listRouterLink v-fornews in newsList :keynews.id :to{path:/news/detail}{{news.name}}/RouterLink/navdiv classnews-detailRouterView//div/div
/template路由传参
route 路由一组对应关系
router 路由器管理路由
query参数 query写法带问号/news/detail?id111titlehaha query参数 有两种写法 是因为 to有两种写法
to的两种写法
RouterLink to/news/detail{{ news.title }}
/RouterLink!-- to的对象写法前面需要加冒号 --
RouterLink :to{path: /news/detail, //或者 name:xiangqing}{{ news.title }}
/RouterLink传递参数 ① to的字符串写法配合模板字符串。to前面加一个冒号表示它实际上的内容是双引号里面的字符串模板字符串 ② to的对象写法 !-- 跳转并携带query参数to的字符串写法 --
li v-fornews in newsList :keynews.idRouterLink :to/news/detail?id${news.id}title${news.title}content${news.content}{{ news.title }}/RouterLink
/li!-- 跳转并携带query参数to的对象写法 --
RouterLink :to{//name:xiangqing, //用name也可以跳转path:/news/detail,query:{id:news.id,title:news.title,content:news.content}}
{{news.title}}
/RouterLink接收参数 这里 useRoute 是 hooksusexxx 命名规则 import {useRoute} from vue-router
const route useRoute()
// 打印query参数
console.log(route.query)如果想解构 route.query会失去响应式。从一个响应式对象身上解构属性该属性必定丢失响应式。要使用 toRefs.
正确做法
import {useRoute} from vue-router
const route useRoute()
// 打印query参数
let {query} toRefs(route)params参数
哈哈 嘿嘿 呼呼 是参数但是vue会认为是路由规则。所以需要在路由中配置规则告诉路由哪部分不算路径。
RouterLink to/news/detail/哈哈/嘿嘿/呼呼{{ news.title }}/RouterLink
1、配置规则
需要在 /router/index.ts中先配置规则 {path: /news,component: News,children: [{name:xiangqing,path: detail/:id/:title/:content, //占位component: Detail}]}数据content 可传可不传的写法
path: detail/:id/:title/:content?
表示content内容可传可不传2、传递参数
备注1传递params参数时若使用to的对象写法必须使用name配置项不能用path。
备注2传递params参数时需要提前在规则中占位。
li v-fornews in newsList :keynews.id!-- 字符串写法 --RouterLink :to/news/detail/${news.id}/${news.title}/${news.content}{{ news.title }}/RouterLink!-- 对象写法 --RouterLink :to{name:xiangqing,params:{id: news.id,title: news.title,content: news.content} }{{ news.title }}/RouterLink/li3、接收参数
import {useRoute} from vue-router
const route useRoute()
// 打印params参数
console.log(route.params)路由规则的props配置
/router/index.ts
作用让路由组件更方便的收到参数可以将路由参数作为props传给组件
{name:xiang,path:detail/:id/:title/:content,component:Detail,// props的布尔值写法作用把收到了每一组【params参数】作为props传给Detail组件// props:true// props的对象写法作用把对象中的每一组key-value作为props传给Detail组件// props:{a:1,b:2,c:3}, // props的函数写法作用把返回的对象中每一组key-value作为props传给Detail组件props(route){return route.query}
}① 对应props的布尔值写法把收到了每一组【params参数】作为props传给Detail组件
News.vue
li v-fornews in newsList :keynews.id!-- 字符串写法 --RouterLink :to/news/detail/${news.id}/${news.title}/${news.content}{{ news.title }}/RouterLink
/liDetail.vue
templateul classnews-listli编号{{ id }}/lili标题{{ title }}/lili内容{{ content }}/li/ul
/templatescript setup langts nameAboutdefineProps([id,title,content])
/script② 对应props的函数写法
{name:xiang,path:detail/:id/:title/:content,component:Detail,props(route){return route.query}
}Detail.vue
templateul classnews-listli编号{{ id }}/lili标题{{ title }}/lili内容{{ content }}/li/ul
/templatescript setup langts nameAboutdefineProps([id,title,content])
/script之前在父组件Father.vue 中注册使用子组件Son.vue一般组件可以直接在父组件内传递参数Son a123于是在Son.vue中使用 defineProps接收参数。
但是如果是路由组件其并不在父组件中注册而是通过路由切换组件这是就可以用到 本小节的路由规则的props配置。在路由组件中也用defineProps接收参数。
replace属性 作用控制路由跳转时操作浏览器历史记录的模式。 浏览器的历史记录有两种写入方式分别为push和replace push是追加历史记录默认值。replace是替换当前记录。 开启replace模式 RouterLink replace .......News/RouterLink编程式导航
之前我们路由跳转的时候使用的是routerlink和routerview。最终浏览器会把 RouterLink 标签变为认识的 a 标签。但如果我们想要点击按钮跳转怎么实现
什么叫编程式路由导航脱离 routerlink 实现路由跳转。
路由组件的两个重要的属性$route和$router变成了两个hooks
import {useRoute,useRouter} from vue-routerconst route useRoute()
const router useRouter()console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)示例
import {useRouter} from vue-router
const router useRouter()
router.push(/news) 这里的 push 写法和routerlink中的to写法一样有字符串写法、也有对象写法
router.push({path: /news/detail,query: {id: news.id,title:news.title,content:news.content}
})利用接口进行限制 import {useRouter} from vue-routerconst router useRouter()// 利用接口进行限制interface NewsInter {id:string,title:string,content:string} function showNewsDetail(news:NewsInter) {router.push({name: xiangqing,query: {id: news.id,title: news.title,content: news.content}})}注意在vue2中编程式路由导航重复跳转是报错的。vue3中不算错。
使用场景
只有满足了某种条件之后才会跳转路由。比如广告五秒之后跳转页面。
重定向 作用将特定的路径重新定向到已有路由。 具体编码 {path:/,redirect:/about
}
