共计 5011 个字符,预计需要花费 13 分钟才能阅读完成。
写在后面
本文为尚硅谷禹神 Vue3 教程的学习笔记。本着本人学习、分享别人的态度,分享学习笔记,心愿能对大家有所帮忙。举荐先按程序浏览往期内容:\
1. Vue3 学习笔记(Day1)\
2. Vue3 学习笔记(Day2)
::: block-1
目录
-
4 路由
- 4.1 对路由的了解
- 4.2 根本切换成果
- 4.3 两个留神点
- 4.4 路由器工作模式
- 4.5 to 的两种写法
- 4.6 命名路由
- 4.7 嵌套路由
- 4.8 路由传参
- 4.9 路由的 props 配置
- 4.10 replace 属性
- 4.11 编程式导航
- 4.12 重定向
:::
4 路由
4.1 对路由的了解
P30:https://www.bilibili.com/video/BV1Za4y1r7KE?p=30
4.2 根本切换成果
P31:https://www.bilibili.com/video/BV1Za4y1r7KE?p=31
Vue3
中要应用 vue-router
的最新版本,目前是 4
版本。
路由配置文件代码如下:
import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
const router = createRouter({history:createWebHistory(),
routes:[
{
path:'/home',
component:Home
},
{
path:'/about',
component:About
}
]
})
export default router
main.ts
代码如下:
import router from './router/index'
app.use(router)
app.mount('#app')
App.vue
代码如下
<template>
<div class="app">
<h2 class="title">Vue 路由测试 </h2>
<!-- 导航区 -->
<div class="navigate">
<RouterLink to="/home" active-class="active"> 首页 </RouterLink>
<RouterLink to="/news" active-class="active"> 新闻 </RouterLink>
<RouterLink to="/about" active-class="active"> 对于 </RouterLink>
</div>
<!-- 展示区 -->
<div class="main-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script lang="ts" setup name="App">
import {RouterLink,RouterView} from 'vue-router'
</script>
4.3 两个留神点
P32:https://www.bilibili.com/video/BV1Za4y1r7KE?p=32
- 路由组件通常寄存在
pages
或views
文件夹,个别组件通常寄存在components
文件夹。 - 通过点击导航,视觉效果上“隐没”了的路由组件,默认是被 卸载 掉的,须要的时候再去 挂载。
4.4 路由器工作模式
P33:https://www.bilibili.com/video/BV1Za4y1r7KE?p=33
history
模式- 长处:
URL
更加好看,不带有#
,更靠近传统的网站URL
。 -
毛病:前期我的项目上线,须要服务端配合解决门路问题,否则刷新会有
404
谬误。const router = createRouter({history:createWebHistory(), // history 模式 })
hash
模式- 长处:兼容性更好,因为不须要服务器端解决门路。
-
毛病:
URL
带有#
不太好看,且在SEO
优化方面绝对较差。const router = createRouter({history:createWebHashHistory(), //hash 模式 })
4.5 to 的两种写法
P34:https://www.bilibili.com/video/BV1Za4y1r7KE?p=34
<!-- 第一种:to 的字符串写法 -->
<router-link active-class="active" to="/home"> 主页 </router-link>
<!-- 第二种:to 的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>
4.6 命名路由
P35:https://www.bilibili.com/video/BV1Za4y1r7KE?p=35
作用:能够简化路由跳转及传参(前面就讲)。
给路由规定命名:
routes:[
{
name:'zhuye',
path:'/home',
component:Home
},
{
name:'xinwen',
path:'/news',
component:News,
},
{
name:'guanyu',
path:'/about',
component:About
}
]
跳转路由:
<!-- 简化前:须要写残缺的门路(to 的字符串写法)-->
<router-link to="/news/detail"> 跳转 </router-link>
<!-- 简化后:间接通过名字跳转(to 的对象写法配合 name 属性)-->
<router-link :to="{name:'guanyu'}"> 跳转 </router-link>
4.7 嵌套路由
P36:https://www.bilibili.com/video/BV1Za4y1r7KE?p=36
- 编写
News
的子路由:Detail.vue
- 配置路由规定,应用
children
配置项:
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 router
- 跳转路由(记得要加残缺门路):
<router-link to="/news/detail">xxxx</router-link>
<!-- 或 -->
<router-link :to="{path:'/news/detail'}">xxxx</router-link>
- 记得去
Home
组件中预留一个<router-view>
<template>
<div class="news">
<nav class="news-list">
<RouterLink v-for="news in newsList" :key="news.id" :to="{path:'/news/detail'}">
{{news.name}}
</RouterLink>
</nav>
<div class="news-detail">
<RouterView/>
</div>
</div>
</template>
4.8 路由传参
query 参数
P37:https://www.bilibili.com/video/BV1Za4y1r7KE?p=37
- 传递参数
<!-- 跳转并携带 query 参数(to 的字符串写法)-->
<router-link to="/news/detail?a=1&b=2&content= 欢送你">
跳转
</router-link>
<!-- 跳转并携带 query 参数(to 的对象写法)-->
<RouterLink
:to="{
//name:'xiang', // 用 name 也能够跳转
path:'/news/detail',
query:{
id:news.id,
title:news.title,
content:news.content
}
}"
>
{{news.title}}
</RouterLink>
- 接管参数:
import {useRoute} from 'vue-router'
const route = useRoute()
// 打印 query 参数
console.log(route.query)
params 参数
P38:https://www.bilibili.com/video/BV1Za4y1r7KE?p=38
- 传递参数
<!-- 跳转并携带 params 参数(to 的字符串写法)-->
<RouterLink :to="`/news/detail/001/ 新闻 001/ 内容 001`">{{news.title}}</RouterLink>
<!-- 跳转并携带 params 参数(to 的对象写法)-->
<RouterLink
:to="{
name:'xiang', // 用 name 跳转
params:{
id:news.id,
title:news.title,
content:news.title
}
}"
>
{{news.title}}
</RouterLink>
- 接管参数:
import {useRoute} from 'vue-router'
const route = useRoute()
// 打印 params 参数
console.log(route.params)
备注 1:传递 params
参数时,若应用 to
的对象写法,必须应用 name
配置项,不能用path
。
备注 2:传递 params
参数时,须要提前在规定中占位。
4.9 路由的 props 配置
P39:https://www.bilibili.com/video/BV1Za4y1r7KE?p=39
作用:让路由组件更不便的收到参数(能够将路由参数作为 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}
}
4.10 replace 属性
P40:https://www.bilibili.com/video/BV1Za4y1r7KE?p=40
- 作用:管制路由跳转时操作浏览器历史记录的模式。
- 浏览器的历史记录有两种写入形式:别离为
push
和replace
: push
是追加历史记录(默认值)。replace
是替换以后记录。- 开启
replace
模式:
<RouterLink replace .......>News</RouterLink>
4.11 编程式导航
P41:https://www.bilibili.com/video/BV1Za4y1r7KE?p=41
路由组件的两个重要的属性:$route
和 $router
变成了两个hooks
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()
console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)
4.12 重定向
P42:https://www.bilibili.com/video/BV1Za4y1r7KE?p=42
- 作用:将特定的门路,从新定向到已有路由。
- 具体编码:
{
path:'/',
redirect:'/about'
}
<center>完结 </center>
本文由 mdnice 多平台公布