vue-router完整的导航解析流程

最新推荐文章于 2024-05-20 15:11:45 发布

原创

最新推荐文章于 2024-05-20 15:11:45 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue-router完整的导航解析流程

本文将深入解析从HOME组件导航到BAR组件时，Vue-Router如何处理整个导航流程，包括路由配置、组件渲染及状态管理。

在这里插入图片描述

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import BAR from './components/bar'
import FOO from './components/foo'
import HOME from './components/home'
import NAME1 from './components/setname1';
import store from './store'

Vue.config.productionTip = false
Vue.use(VueRouter)



const router = new VueRouter({
  routes: [
    {
      path:'/bar',
      components:{default:BAR,name1:NAME1},
      beforeEnter: (to, from, next) => {
        if(confirm('路由独享的守卫')=== true){
          next()
        }
        else{
          next(false)
        } 
      },
      
    },//视图命名可以规定输出位置
    {path:'/foo',component:FOO},
    {path:'*',component:HOME}  
  ]
})


router.beforeEach((to, from, next) => {
  if(confirm('全局前置守卫')=== true){
    next()
  }
  else{
    next(false)
  } 
})

router.beforeResolve((to, from, next) => {
  if(co