天津百度做网站多少钱,网站改版换了域名,明年开春有望摘口罩,北京网站假设文章目录 路由器工作模式命名路由to的三种写法嵌套路由路由传参query参数params参数 路由的props配置replace 和 push编程式导航重定向 总结 路由器工作模式 history模式 优点#xff1a;URL更加美观#xff0c;不带有##xff0c;更接近传统的网站URL。 缺点#xff1a;后… 文章目录 路由器工作模式命名路由to的三种写法嵌套路由路由传参query参数params参数 路由的props配置replace 和 push编程式导航重定向 总结 路由器工作模式 history模式 优点URL更加美观不带有#更接近传统的网站URL。 缺点后期项目上线需要服务端配合处理路径问题否则刷新会有404错误。 const router createRouter({history:createWebHistory(), //history模式/******/
})hash模式 优点兼容性更好因为不需要服务器端处理路径。 缺点URL带有#不太美观且在SEO优化方面相对较差。 const router createRouter({history:createWebHashHistory(), //hash模式/******/
})命名路由
routes:[{name:zhuye,path:/home,component:Home},{name:xinwen,path:/news,component:News,},{name:guanyu,path:/about,component:About}
]to的三种写法
!-- 第一种to的字符串写法 --
router-link active-classactive to/homeHome/router-link!-- 第二种to的对象写法 --
router-link active-classactive :to{path:/home}Home/router-link!-- 第三种 --
router-link active-classactive :to{name:zhuye}Home/router-link嵌套路由 编写News的子路由Detail.vue 配置路由规则使用children配置项 const router createRouter({history:createWebHistory(),routes:[{name:xinwen,path:/news,component:News,children:[{name:xiang,path:detail,component:Detail}]}]
})
export default router跳转路由记得要加完整路径 router-link to/news/detailxxxx/router-link
!-- 或 --
router-link :to{path:/news/detail}xxxx/router-link路由传参
query参数 传递参数 !-- 跳转并携带query参数to的字符串写法 --
router-link to/news/detail?a1b2content欢迎你 /router-link!-- 跳转并携带query参数to的对象写法 --
RouterLink :to{//name:xxx, //用name也可以跳转path:/news/detail,query:{id:news.id,title:news.title,content:news.content}}
{{news.title}}
/RouterLink接收参数 使用useRoute接受 import {useRoute} from vue-router
const route useRoute()
// 打印query参数
console.log(route.query)params参数 传递参数 !-- 跳转并携带params参数to的字符串写法 --
RouterLink :to/news/detail/001/新闻001/内容001/RouterLink //直接写要传送内容 需要提前在规则router中配置站位!-- 跳转并携带params参数to的对象写法 --
RouterLink :to{name:xiang, //用name跳转params:{id:news.id,title:news.title,content:news.title}}
/RouterLink接收参数 import {useRoute} from vue-router
const route useRoute()
// 打印params参数
console.log(route.params)备注1传递params参数时若使用to的对象写法必须使用name配置项不能用path。 备注2传递params参数时需要提前在规则中占位。 路由的props配置
作用让路由组件更方便的收到参数可以将路由参数作为props传给组件
{name:xiang,path:detail/:id/:title/:content,component:Detail,// props的对象写法作用把对象中的每一组key-value作为props传给Detail组件// props:{a:1,b:2,c:3}, // props的布尔值写法作用把收到了每一组params参数作为props传给Detail组件// props:true// props的函数写法作用把返回的对象中每一组key-value作为props传给Detail组件props(route){return route.query}
}replace 和 push 作用控制路由跳转时操作浏览器历史记录的模式。 浏览器的历史记录有两种写入方式分别为push和replace push是追加历史记录默认值。replace是替换当前记录。 开启replace模式 RouterLink replace .......News/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)重定向 作用将特定的路径重新定向到已有路由。 具体编码 {path:/,redirect:/about
}总结
Vue 3.0的基本语法至此已经结束了后面将会介绍pinia 和 组件通信。
