Vue路由及路由守卫

1. Vue路由的添加

vue cli3添加vue-router通过命令vue add router

export default new Router({mode: 'history',routes: [{path: '/',component: Main},{path: '/login',component: Login}]
})// app.vue
<div id="app"><router-view></router-view>
</div>// main.vue
<div><router-link to="/"></router-link><router-link to="/login"></router-link>
</div>

2. 路由的重定向

export default new Router({mode: 'history',routes: [{path: '/', redirect: '/main'}// 当只有8080和8080/ 的时候，调到主页]
})

3. 定义子路由

export default new Router({routes: [{path: '/',component: Main},{path: '/login',component: Login},{path: '/admin',component: Admin,children: [{path: 'buttons', component: Buttons },  // 注意需要使用相对地址{path: 'Tables', component Tables } ]}]
})// 父级路由存在<router-view></router-view>

4. 路由守卫

全局beforeRouter
路由beforeEnter
组件beforeRouteEnter

const router = new Router({});router.beforeEach((to, from, next) => {//to 前往的路由, from 来的路由, next 下一步钩子函数，没有问题，必须执行next()  console.log(to);if (to.path !== '/login') {if (window.isLogin) {next()} else {next('/login?redirect='+ to.path)}} else {next()}
})export default router

转载于:https://www.cnblogs.com/Xmforever/p/10332227.html

Vue路由及路由守卫相关推荐

创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节
一.路由相关点 1. 路由跳转传参以及接参 https://segmentfault.com/a/1190000012393587 方法一: (1) 参数配置: { path : 'xx/:参数变量' ...
Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)详解
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
vue中的路由守卫(导航守卫)
在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断. vue-router提供了导航钩子:全局前置导航钩子 beforeEa ...
Vue中路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
5分钟学会vue中的路由守卫
5分钟学会vue中的路由守卫在项目开发中每一次页面的跳转或者刷新,都需要判断用户是否已经登录.后端会进行判断的,前端最好也进行一次判断. vue-router提供了导航钩子:全局前置导航钩子 bef ...
vue路由（十二）路由独享守卫beforeEnter和页面内组件路由守卫：beforeRouteEnter，beforeRouteLeave，beforeUpdate
1 路由独享守卫,单个路由拦截处理 {path: '/Test',name: 'Test',components: {default: () => import('../views/Test.v ...
【Vue】vue中的路由导航守卫(路由的生命周期)
文章目录全局前置守卫可选的第三个参数 `next` 全局解析守卫 router.beforeResolve 全局后置钩子路由独享的守卫组件内的守卫可用的配置 API 使用组合 API 完整的 ...
2022-11-15 vue笔记-路由vue-router(四) 路由守卫(又称路由拦截,导航守卫)的定义以及示例
文章目录 0.路由的概念 1.路由守卫的定义定义官方解释路由守卫的分类钩子函数 2.路由守卫的使用场景 3.语法:`router.beforeEach((to,from,next) => ...
路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7
# 路由的导航守卫别名: 导航守卫路由守卫路由钩子路由拦截作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 [ 项目三选一 ] ...
【vue面试题-路由】
路由 1.mvvm 框架是什么? 2.vue-router 是什么?它有哪些组件 3.active-class 是哪个组件的属性? 4.怎么定义 vue-router 的动态路由? 怎么获取传过来的值 ...

Vue路由及路由守卫

Vue路由及路由守卫相关推荐

最新文章

热门文章