VueRouter学习日志

<div id="app">
  //1.router-link 中用于进行导航  to用于指定链接
  //2.router-view 是路由出口 显示router-link中的url对应的组件
  <router-link to="/">go to Homerouter-link>
  <router-link to="/about">go to Aboutrouter-link>
  <router-view>router-view>
 div>

//1.定义一些路由组件，也可以从其他文件中导入
 const Home={template:'
Home
'},
 const About={template:'
About
'}
 
 //2.定义一些路由  每个路由都需要映射到一个组件
 const routes=[
    {path:'/',component:Home},
    {path:'/about',component:About},
 ]
 
 //3.创建路由实例并传递'routes'配置
 const router=VueRouter.createRouter({
     
     //4.内部提供了history模式的实现
     history:VueRouter.createWebHasHistory(),
     routes,
 })
 
 //5.创建并挂载根实例
 const app = Vue.createApp({})
 
//6.通过调用app.use(router)使得我们可以在任意组件中以this.$router形式访问它，并且以this.$routes的形式访问当前路由
 app.use(router)
 
 app.mount('#app')

 const User = {
      template:'
User
',
  }
 
  const routes = [
      {path:'/users/:id',component:User},
  ]

const User = {
      template:'
User{{$route.params.id}}
'
  }

 const User = {
    template:'...',
    created(){
        this.$watch(
            //要对同一个组件中的参数变化做出响应，可以简单的watch $route对象上的任意属性
            () =>this.$route.params,
            (toParams,previousParam)=>{
                //对路由变化做出响应
            }
        )
    }
  }

 <div id="app">
      <router-view>router-view>//这里的router-view是顶层
  div>

 const User = {
      template:'
      
          
User{{$route.param.id}}
          //这里是app渲染的组件在渲染下一层组件
      
'

  要想实现路由组件，要在路由中配置childeren:
 

 const routes = [
  {
      path:'/user/id',
      components:User,
      children:[
          {
              path:'profile',
            component:UserProfile,
          },
          {
              path:'posts',
              component:UserPosts,
          },
      ],
 
  },
]

注意：以/开头的嵌套路劲将被视为根路径  这允许你利用组件嵌套  而不必使用url

还有一些vue-router低级部分没有看  比如vue-router命名等  这个没必要看 看了也不记得 直接用就好 

4.导航守卫

Vue 导航守卫_许你今世繁华的博客-CSDN博客_vue导航守卫

vue导航守卫_摩羯座**的博客-CSDN博客_vue导航守卫

VueRouter提供的导航守卫主要用于在导航的过程中重定向或取消路由，或添加权限验证，数据获取等业务逻辑===>监听每一个路由跳转的过程，然后提供一些钩子函数让你有机会在跳入过程中植入相关信息

导航守卫的分类(这三个守卫可以用于路由导航过程中的不同阶段）：

1. 全局守卫（全局前置守卫，全局解析守卫，全局后置钩子）
2. 路由守卫(路由独享守卫）
3. 组件内守卫（加载，离开，更新)

每一个导航守卫都有三个参数：to、from和next。

• to：表示即将进入的目标路由对象
• from：当前导航正要离开的路由对象
• next：函数，以下是next的常用方法
• next(): 进行管道中的下一个钩子
• next(false): 中断当前导航
• next( ./xx ): 中断当前导航，并跳转至设置好的路径

1.全局前置守卫：

当一个导航触发时，全局前置守卫按照创建的顺序调用。守卫可以是异步解析执行，此时导航在所有守卫解析完之前一直处于挂起状态。全局前置守卫使用router.beforeEach()注册

特点：可以拦截页面跳转

 执行时间：在页面跳转完成之前 

参数：to表示即将前往页面对应的路由对象，系统自动注入 // from 表示即将离开页面的路由对象，系统自动注入

const router = new VueRouter({....});
router.beforeEach((to,from,next)=>{
   // 用户验证登录身份
   if (to.name != 'Login' && !isAuthenticated) next({ name: 'Login' })
       else next();
})

2.全局解析守卫

全局解析守卫是vue-router2.5.0版本新增的，使用【router.beforeResolve】注册。它和【router.beforeEach】类似，区域在于，在导航被确认之前，在所有组件内守卫和异步路由组件被解析之后，解析守卫被调用。

特点：可以拦截页面跳转

执行时间：在页面跳转完成之前 

参数：to 表示即将前往页面对应的路由对象，系统自动注入// from 表示即将离开页面的路由对象，系统自动注入 // next 路由跳转方法

const router = new VueRouter({....});
router.beforeResolve((to,from,next)=>{
    //这里执行具体操作
    //next 调用
   if(to.meta.verification){
         try {
              // 验证正确
            await askForPage()
         }catch(error) {
              // 验证错误，取消导航
            return false
           }
         }
}

3.全局后置钩子

全局后置钩子使用【router.afterEach】注册，它在导航被确认之后调用。

 参数：to 表示即将前往页面对应的路由对象，系统自动注入// from 表示即将离开页面的路由对象，系统自动注入

const router = new VueRouter({....});
router.afterEach((to,from)=>{
    //这里执行具体操作
})

4.路由守卫

路由独享守卫是在routes配置的路由对象中直接定义的beforeEnter守卫。
路由独享守卫只在进入路由时触发，参数改变时不会触发，它们只有在从一个不同的路由导航时，才会被触发

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

5.组件内守卫

共有三个组件内守卫：beforeRouteEnter、beforeRouterUpdate和beforeRouteLeave。

注意：

beforeRouterEnter守卫不能访问this，因为在守卫是在导航确认前被调用，这时新进入的组件实例还没有被创建。

不过beforeRouteEnter有一个特权，就是它的next函数支持回调，而其他的守卫则不行。可以把组件实例作为回调方式的参数，在导航被确认后执行回调，而这个时候，组件实例已经创建完成。利用这个特性，可以将created钩子用beforeRoute守卫来替换

//
const book = {
    template:"...",
    beforeRouteEnter (to, from, next) {
       //在渲染该组件的路由被确认之前调用
       //不能通过this来访问组件实例，因为在守卫执行前，组件实例还没有被创建
    },
    beforeRouteUpdate (to, from, next) {
        //在渲染该组件的路由改变，但是该组件被复用时调用
        //例如，对于一个带有动态参数的路由 /foo/：id，在/foo/1和/foo/2之间跳转的时候
        //相同的foo组件实例将会被复用，而这个守卫就会在这种情况下被调用。
        //可以访问组件实例的this
    },
    beforeRouteLeave (to, from, next) {
       //导航即将离开该组件的路由时调用
       //可以访问组件实例的this
    }
}

5.路由元信息

将任意信息附加到路由上，如过渡名称，谁可以访问路由等

const routes = [
    ...
 
    meta:{
        //任何人都可以阅读文章
        requiresAuth:false
   }
]

6.数据获取

进入某个路由后，需要从服务器获取数据，我们可以通过两种方式来实现：

• 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。

       当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。假设我们有一个 Post 组件，需要基于 $route.params.id 获取文章数据

<template>
  <div class="post">
    <div v-if="loading" class="loading">Loading...div>
 
    <div v-if="error" class="error">{{ error }}div>
 
    <div v-if="post" class="content">
      <h2>{{ post.title }}h2>
      <p>{{ post.body }}p>
    div>
  div>
template>

export default {
  data() {
    return {
      loading: false,
      post: null,
      error: null,
    }
  },
  created() {
    // watch 路由的参数，以便再次获取数据
    this.$watch(
      () => this.$route.params,
      () => {
        this.fetchData()
      },
      // 组件创建完后获取数据，
      // 此时 data 已经被 observed 了
      { immediate: true }
    )
  },
  methods: {
    fetchData() {
      this.error = this.post = null
      this.loading = true
      // replace `getPost` with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    },
  },
}

• 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

      通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法：

export default {
  data() {
    return {
      post: null,
      error: null,
    }
  },
  beforeRouteEnter(to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // 路由改变前，组件就已经渲染完了
  // 逻辑稍稍不同
  async beforeRouteUpdate(to, from) {
    this.post = null
    try {
      this.post = await getPost(to.params.id)
    } catch (error) {
      this.error = error.toString()
    }
  },
}