vue-router定义元信息meta

router/index.js

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue' import NotFound from '../views/NotFound.vue' import TestChild from '../views/TestChild.vue' import AView from '../views/AView.vue' import BView from '../views/BView.vue' Vue.use(VueRouter) const routes = [ { path: '/', alias:'/home', components:{ default: Home, aView: AView, bView: BView, }, }, { path: '/test/:id', name: 'Test', component: Test, props:true, children:[ { path: ':name', name: 'TestChild', component: TestChild, props:true, /* 定义路由的时候可以配置 meta 字段，用于一些校验，比如在导航守卫中进行校验，定义的值可以在$route中访问到 */ meta:{ isRequiresAuth:true, isChecked:false, } }] }, { path: '*', name: 'NotFound', component: NotFound }, ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router

views/TestChild.vue

<template> <div> 我是TestChild,查看动态路由参数name:{{name}} </div> </template> <script> export default { props:["name"], created () { //打印meta中定义的isRequiresAuth console.log(this.$route.meta.isRequiresAuth); }, } </script> <style lang="scss" scoped> </style>

效果截图：