Vue 路由管理_2023-01-15
2023-01-14 本文已影响0人
微笑碧落
1. 简介
- 日常网站，经常需要进行页面的跳转，对于单页面网站，就是通过不同组件的渲染来呈现不同的功能页面。比如用户单击注册按钮，切换至注册页面。单击导航选项切换至对应的页面。用户的切换操作，产生一个路径，路由管理器通过路径在指定的位置渲染不同的组件，从而实现单页面网站。
- 路径并不仅仅是用户点击切换，也可以是在地址栏上进行操作。因为路径也类似于网址。
- 而路由管理器，就是管理这种对应关系，用来链接组件、组件渲染位置、路径。这种对应关系也称为路由。
2. 路径这个样子
- 看到一个#号了吧。。这个就是路径
- 注意，如果安装了路由管理器，访问http://localhost:8080/网址，会自动跳转http://localhost:8080/#/这个路径。所以路由表需要能够处理这个路径（或通过路由守卫进行跳转）
http://localhost:8080/#/home
3. Vue的路由管理器安装
npm install vue-router@4 -s
4. Vue的路由管理器的使用
- 因为路由表会越来越大，所以最好是另外在一个js文件上单独管理路由表。如下是一个router.js文件
- routes是一个路由对象数组。里面有路由的信息。文章后面会介绍路由对象的详细属性作用。
- 可以看到，使用了路由管理器后，组件都需要交给路由管理器管理。。除了根组件。
- 如下定义了一个根路由，路径是/home，这个路径会把HomePage这个组件渲染在根组件的<router-viem>位置上
- 如下路由还定义了一个别名，alisa可以设置为字符串或一个数组。
- 如下路由还有一个name属性，可以更方便的跳转到这个路由
import {createRouter, createWebHashHistory} from 'vue-router'
import ResultShow from '../components/ResultShow'
const routes = [
{path: '/home', component: HomePage, name:,alias:"/home/ll"},
]
const router = createRouter({history: createWebHashHistory(), routes: routes,})
export default router
- main.js注册这个路由管理器
//导入路由配置
import router from './config/router'
const app =createApp(App)
app.use(router)
5. route-link
router-link可以理解为一个a元素，用户点击这个link会自动触发path的路径，然后路由管理器根据path在指定的位置渲染路由表上的组件。
<router-link to="some path"></router-link>
6. 路径的高级用法
6.1带参数路径
- 如下表示带了2个参数，这些参数保存在$route.params.user。组件可以直接引用。注意这个参数是全局的参数。
{path: '/home/:user/:id', component: HomePage, }
6.2指定参数个数
- 如下表示带了多个参数，/home/xiaoli/xiaowang都匹配这个规则，此时$route.params.user返回一个数组
{path: '/home/:user*', component: HomePage, }
6.3指定参数是否必须
- 如下表示参数非必须。如果没有这个符号，必须有参数才会跳转到这个组件
{path: '/home/:user?', component: HomePage, name:}
7. 路由的嵌套
- 如果要渲染的路由位置不是在根组件，而是在某一个组件下面，可以用如下方法。
- 此时Friends组件会被渲染在HomePage组件的router-view上。
const routes = [
{
path: '/home',
component: HomePage,
children:[
{
path:friends,
conponent:Friends
}
]
},
]
8. 动态页面导航
- 采用这个办法可以动态进行导航，而不仅仅依靠</router-link>组件。可以在用户的单击事件中调用这个方法。比如导航菜单中点击导航项后进行导航
- 注意name导航方法，需要和路由表的name一致。即通过名称访问方式
- 指定了path访问方法，params参数会自动忽略
this.$router.push("/home")
this.$router.push({
name:,
params:{},
query:{},
path:
})
- 注意。。push是在浏览器的前进后退上增加导航记录。如果不希望增加导航记录，可以用replace方法代替push。参数都一样。
9. 路由视图的高级用法
9.1路由视图的命名
- 路由视图可以命名，以便支持多个同级路由视图
- 没有进行命名的视图，默认带有default命名
<router-viem name="main"><router-viem>
9.2 在路由表指定组件对应的具体路由视图
- 如下表示一个路径，同时在多个组件视图上渲染多个组件。。当然也可以只在一个路由视图渲染一个组件。
{
path:"/home"
components: {
main:Components1,
default:Components2
}
}
10. 路由的重定向
路由的重定向表示访问这个路由后直接跳转至新路由。
- 直接指定路径
{
path:
redirect:"/login"
}
- 指定参数、路由name等。属性和$router.push一致
{
path:
redirect:{
name:pathName,
}
}
- 指定为一个函数，返回如上的对象
{
path:
redirect: to=>{
console.log(to)
return {path:,}
}
}
11. 路由传参数
- 之前说了路由可以带参数，可以直接访问$route.params.username获得参数。。但是这方法不好。。组件重复性不够高。。也不够安全。。比较这些参数是全局的。。同时也是变动的。。同时和路由管理器紧紧绑定在一起了。
- 此时可以用路由传参的方法。
- 如下代码的id参数会自动传递给组件的props中名为id的参数
const routes = [
{ path: '/user/:id(\\d+)', component:UserSetting, props:true }
]
如果一个路径对应多个路由视图，需要如下
const routes = [
{ path: '/user/:id(\\d+)', component:UserSetting, props:{routeViewName1: true, routeViewName1: true} }
]
- 如果要抛弃路由自带的参数，重新指定参数，可以如下。
- 可以看到通过路由传参的方式，可以更加个性的渲染组件，组件也更加可以复用
const routes = [
{ path: '/user/:id(\\d+)', component:UserSetting, props:{propName:value} }
]
- 还有一种更强大的方法，即props可以设置为函数方式
- 可以看到路由传参是传值。。意思就是通过这个值来渲染组件。
const routes = [
{ path: '/user/:id(\\d+)', component:UserSetting, props:route=>{
return {
id: route.params.id,
}
} }
]
12. 路由守卫
- 守卫路由守卫，就是在路由跳转前或后执行的一段函数。可以理解为一个路由事件。作用是允许或拒绝路由跳转，比如用户没有登录，所有跳转都拒绝。有很多种方式可以定义路由守卫。比如全局路由守卫、或针对单独路由的守卫
- 路由守卫返回true表示同意此次跳转，false表示拒绝。更多的情况下是返回一个对象，该对象和$router.push()方法的对象一样。
12.1 全局路由
- 全局路由定义在如上route.js的router对象上。
- beforeEach为路由前置守卫。afterEach为路由后置守卫。
router.beforeEach((to, from)=>{
console.log(to)
return false //拒绝此次跳转
})
router.afterEach
12.2 特定路由的路由守卫
- 注册到路由表即可
- 有如下守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
routes = [
{
path:,
beforeRouteEnter: (to, from, next)=>{} //next为一个函数，路由放行后执行
beforeRouteEnter: (route)=>{}
}
]
13. 路由的动态管理
- 在静态路由表写死的叫静态路由。如果需要在代码中动态增加路由，可以用如下方法
- 很容易理解，增加路由传入的是一个路由对象，删除的话是一个路由名称。getRoutes返回全部路由对象数组。
$router.addRoute()
$router.removeRoute()
$router.getRoutes()
