vue 中路由meta

meta字段(元数据)
直接在路由配置的时候,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作。用它来做登录校验再合适不过了
{
path: ‘/actile’,
name: ‘Actile’,
component: Actile,
meta: {
login_require: false
},
},
{
path: ‘/goodslist’,
name: ‘goodslist’,
component: Goodslist,
meta: {
login_require: true
},
children:[
{
path: ‘online’,
component: GoodslistOnline
}
]
}

这里我们只需要判断item下面的meta对象中的login_require是不是true,就可以做一些限制了router.beforeEach((to, from, next) => {
if (to.matched.some(function (item) {
return item.meta.login_require
})) {
next(’/login’)
} else
next()
})

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中路由的实现方式有两种:hash模式和history模式。 1. hash模式 在hash模式下,路由信息会保存在URL的hash中,以#号开头。例如:http://localhost:8080/#/home。Vue Router会监听URL的变化,当URL的hash发生变化时,会根据新的hash值切换到对应的组件。 2. history模式 在history模式下,路由信息会保存在浏览器的历史记录中。例如:http://localhost:8080/home。Vue Router会使用HTML5的History API来实现路由切换。在history模式下,URL中不再需要#号,看起来更加清晰。 在Vue中使用路由,需要引入Vue Router,然后定义路由规则和对应的组件。最后在Vue实例中挂载Vue Router。 例如: ``` import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import About from '@/components/About' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] }) ``` 这里定义了两个路由规则,一个是/,对应的组件是Home,另一个是/about,对应的组件是About。最后在Vue实例中挂载Vue Router。 例如: ``` import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app') ``` 在模板中使用路由链接和路由视图,例如: ``` <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值