路由元信息meta
当我们想要在路由上添加一些信息时,可以在routes
中添加meta
属性,然后在里面写上想要的信息。
假如网站中有公共的部分和私密部分,公共部分是所有人都可以看到的,私密部分只有管理员才能看到。这时可以在meta
中添加权限。
const routes=[
{
path: '/public',
component:()=>import('../../components/Public.vue'),
meta: {authority: false} //不需要权限
},
{
path: '/private',
component:()=>import('../../components/Private.vue'),
meta: {authority: true} //需要权限
}
]
const router=createRouter({
history: createWebHistory(),
routes
})
router.beforeEach((to,from,next)=>{
if(to.meta.authority) {
alert('你没有权限访问,请联系管理员!')
}else {
next()
}
})
export default router
结果如下:可以看到当普通用户访问私密部分没有权限,但是可以访问公共部分。
访问路由
在setup中没有this,所以直接访问this.$router
和this.$route
是访问不到的,vue-router
提供了useRouter
和useRoute
可以让我们访问到路由。
通过点击事件来进行页面跳转。
<script setup>
import {useRouter,useRoute} from 'vue-router'
const router=useRouter()
const route=useRoute()
const logout=()=>{
router.push('/login')
}
</script>
我们也可以监听路由的变化来做某些事情。
import { watch } from 'vue'
import {useRouter,useRoute} from 'vue-router'
const router=useRouter()
const route=useRoute()
watch(route,(newValue,oldValue)=>{
function dosomething(){
}
})
在模板中可以直接访问到$router
和$route
,但是在setup
中不行。下面的例子中仍然可以通过$route.params.id
来取到值。
<template>
<div>{{$route.params.id}}</div>
<button @click="logout">logout</button>
</template>
路由懒加载
Vue Router支持组件的动态导入,即当需要用到这个路由时才导入。
import User from './views/User.vue' //静态导入
const User=()=>import('./views/User.vue') //动态导入
const routes=[
{path: '/user',component:User}
//可以写成下面形式
//{path: '/user',component:()=>import('./views/User.vue')}
]