vue简单路由配置

220 阅读1分钟

路由

vue.js官网路由

如果你只需要非常简单的路由而不想引入一个功能完整的路由库,可以像这样动态渲染一个页面级的组件:

image.png

此处转于vue.js官网,如需详情,点击此处跳转至vue官网cn.vuejs.org/

路由的配置

image.png 在上方引入自己所写的组件,写在component中,path是自己定义的路径,这里的name是用来在路由传值的时候来使用的

路由重定向(redirect)

image.png

上图中redirect中是当地址进入到/about中的时候直接跳转至index路径

路由守卫(to, from, next)

image.png image.png

在配置项meta中自定义一个属性,在router.berforeEach中用some来判断所定义路由之中是否有自己所定义的属性,如果匹配成功,在进行 自己根据需求再次进行判断,当满足需求是则进行next()正常加载组件,如果不满足,则跳转到登录页面或者所需要的页面