Vue路由三

路由元信息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')}
]