二、vue3学习笔记：路由高级

最新推荐文章于 2024-07-02 19:52:08 发布
最新推荐文章于 2024-07-02 19:52:08 发布
阅读量492 收藏 1
点赞数
分类专栏： 前端 文章标签： vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miracleoa/article/details/100533569
版权

文章目录

一、路由组件传参：

1. 布尔模式

  • /view/argu.vue
<template>
  <div>
    <!--$route代表当前加载的路由对象,包含params参数，它是一个对象，里面包含一个叫做name的值-->
    {{ name }}
  </div>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: 'sun'
      }
    }
  }
</script>
  • /router/router.js
{
    // 动态路由参数，不管参数是什么，匹配到的都是这个路由对象
    path: '/argu/:name',
    name: 'argu',
    component: () => import('@/views/argu.vue'),
    // true表示里面的参数，它会使用router的params作为组建的属性，此时params中
    // 有一个name('/argu/:name'),它就会把name传入argu的属性里
    props: true
  },

2. 普通页面模式

  • /view/About.vue
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <b>{{ food }}</b>
  </div>
</template>
<script>
  export default {
    props: {
      food: {
        type: String,
        default: 'apple'
      }
    }
  }
</script>
  • /router/router.js
{
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 懒加载
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
    props: {
      food: 'banana'
    }
  }

3. 函数模式

  • router/router.js
{
    path: '/',
    // 定义别名
    alias: '/home_page',
    name: 'home',
    component: Home,
    // 函数模式
    props: router => {

    }
  }
  • /views/Home.vue
<template>
  <div class="home">
    <b>{{ food }}</b>
    <img alt="Vue logo" src="../assets/img/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <button @click="handleClick('back')">返回上一页</button>
    <button @click="handleClick('push')">跳转parent</button>
    <button @click="handleClick('replace')">替换到parent</button>

  </div>
</template>

<script>
  // @ is an alias to /src
  import HelloWorld from '@/components/HelloWorld.vue'

  export default {
    name: 'home',
    components: {
      HelloWorld
    },
    props: {
      food: {
        type: String,
        default: 'apple'
      }
    },
    methods: {
      handleClick(type) {
        // 路由实例，可在main.js中进行查看，此处-1为返回上一页，1为返回下一页   back()功能相同
        if (type === 'back') this.$router.back()         // this.$router.go(-1)
        else if (type === 'push') {
          const name = 'sun'
          // this.$router.push('/parent')
          this.$router.push({
              // name可以把参数带过去，而path不能
              path: `/argu/${name}`
              // name: 'argu',
              // params: {
              //   name: 'sun'
              // }
            // name: 'parent',
            // query: {
            //   // 在地址后面会多一个参数：http://localhost:8080/#/parent?name=sun
            //   name: 'sun'
            // }
          })
        }
        else if (type === 'replace')
          this.$router.replace({
            name: 'parent'
          })
      }
    }
  }
</script>

网址 ： http://localhost:8080/#/?food=banana

  • 结果如图：
    在这里插入图片描述

二、html5 history模式

  • 使用history的一些api来做无刷新页面的一些跳转，没有#
    如果使用history模式，所有匹配不到url的静态资源都会指向index.html
    应该在router.js里面增加一个匹配所有路径的路由
  • router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import routes from './router'

// Router作为一个插件，需要使用Vue.use()方式将其加载进来
Vue.use(Router)

// Router有两个参数：routes和mode
export default new Router({
  // 模式
  // 在url的# 号后面作变化，页面是不会刷新的
  // mode: 'hash',
  /* 使用history的一些api来做无刷新页面的一些跳转，没有#
  如果使用history模式，所有匹配不到url的静态资源都会指向index.html
  应该在router.js里面增加一个匹配所有路径的路由 */
  mode: 'history',
  // 路由
  routes: routes
})
  • router/router.js
// 根据优先级原则，定义在越上面的，优先级越高,因此，应该定义在最下面
{
  path: '*',
  component: () => import('@/views/error_404.vue')
}
  • views/error_404.vue
<template>
    <div>
      404
    </div>
</template>

<script>
    export default {
        name: ""
    }
</script>

<style scoped>

</style>

三、导航守卫

完整的导航解析流程：

1.导航被触发
2.在失活的组件（即将离开的页面组件）里调用离开守卫 beforeRouteLeave
3.调用全局的前置守卫 beforeEach
4.在重用的组件里调用 beforeRouteUpdate
5.调用路由独享
6.解析异步路由组件
7.在被激活的组件（即将进入的页面组件）里调用 beforeRouteEnter
8.调用全局解析守卫 beforeResolve
9.导航被确认
10.调用全局的后置守卫 afterEach
11.触发DOM更新
12.用创建好的实例调用beforeRouterEnter守卫里传给next的回调函数

1. 全局守卫

1）router.beforeEach : 全局前置守卫
  • router/router.js
{
    path: '/login',
    name: 'login',
    component: () => import('@/views/login.vue')
  },
  • router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import routes from './router'

// Router作为一个插件，需要使用Vue.use()方式将其加载进来
Vue.use(Router)

// 拎出来单独定义
const router = new Router({
  routes
})

const HAS_LOGINED = true

// 注册一个全局前置守卫
// to,from,next都是路由对象，to代表即将跳转的页面，from是即将离开的路由对象，next是一个函数
router.beforeEach((to, from, next) => {
  if (to.name !== 'login') {
    // 如果已经登陆则跳转
    if (HAS_LOGINED) next()
    // 如果为登陆，则先登录，里面可以传入name对象，或path，或路径
    else next({ name: 'login' })
  } else {
    if (HAS_LOGINED) next({ name: 'home' })
    else next()
  }
})

// Router有两个参数：routes和mode
// 模式
// 在url的# 号后面作变化，页面是不会刷新的
// mode: 'hash',
/* 使用history的一些api来做无刷新页面的一些跳转，没有#
如果使用history模式，所有匹配不到url的静态资源都会指向index.html
应该在router.js里面增加一个匹配所有路径的路由 */
// mode: 'history',
// 路由
export default router
  • views/login.vue
<template>
    <div>
      Login page
    </div>
</template>

<script>
    export default {
        name: ""
    }
</script>

<style scoped>

</style>
2）后置钩子
  • router/index.js
// 后置钩子,在路由跳转之后进行一些操作，它不能对跳转的页面进行操作，控制，它只是能够处理一些简单逻辑
router.afterEach((to, from) => {
  // logining = false
})

2. 专供于页面的守卫

1）beforeRouteEnter
  • views/Home.vue
  • beforeRouteEnter : 组件在确认前被调用
import Home from '@/views/Home'

export default [
  {
    path: '/',
    // 定义别名
    alias: '/home_page',
    name: 'home',
    component: Home,
    // 函数模式 route为参数，代表当前路由对象  如果想要返回一个对象，则以这种方式填写：({})
    props: route => ({
      food: route.query.food
    }),
    // 专供于home页的守卫
    // to,from,next都是路由对象，to代表即将跳转的页面，from是即将离开的路由对象，next是一个函数
    beforeEnter: (to, from, next) => {
      if (from.name === 'about') alert('这是从about来的')
      else alert('这不是从about来的')
      // 注意调用next()跳转页面
      next()
    }
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login.vue')
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 懒加载
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
    props: {
      food: 'banana'
    }
  },
  {
    // 动态路由参数，不管参数是什么，匹配到的都是这个路由对象
    path: '/argu/:name',
    name: 'argu',
    // 参数
    params: {
      name: 'lison'
    },
    component: () => import('@/views/argu.vue'),
    // true表示里面的参数，它会使用router的params作为组建的属性，此时params中
    // 有一个name('/argu/:name'),它就会把name传入argu的属性里
    props: true
  },
  // 嵌套路由
  {
    path: '/parent',
    name: 'parent',
    component: () => import('@/views/parent.vue'),
    // children代表着嵌套在parent里面的子集页面，路径不用写斜线，作为子集会自动补全
    children: [
      {
        path: 'child',
        component: () => import('@/views/child.vue')
      }
    ]
  },
  {
    path: '/named_view',
    // 注意有个s
    components: {
      // 没有命名则加载default
      default: () => import('@/views/child.vue'),
      email: () => import('@/views/email.vue'),
      tel: () => import('@/views/tel.vue')
    }
  },
  // 重定向路由
  {
    path: '/main',
    // redirect: '/'
    // redirect: to => {
    //   console.log(to)
    // }
    // redirect: 'home'
    // redirect: to => {
    //   return {
    //     name: 'home'
    //   }
    // }
    redirect: to => {
      return '/'
    }
  },
  // 根据优先级原则，定义在越上面的，优先级越高，因此，应该定义在最下面
  {
    path: '*',
    component: () => import('@/views/error_404.vue')
  }
]
  • views/Home.vue : 打印出当前所有实例
	// 组件在确认前被调用
    beforeRouteEnter(to, from, next) {
      next(vm => {
        // 打印出当前所有实例
        console.log(vm);
      })
      // 跳转至下一页
      next()
    },
2） 页面后置钩子：beforeRouteLeave
  • src/views/Home.vue :页面后置钩子
// 页面后置钩子
beforeRouteLeave(to, from, next) {
  const leave = confirm('您确定要离开吗？')
  if (leave) next()
  else next(false)
},
  • src/views/argu.vue : 在路由发生变化，组件被复用的情况时被调用
<template>
  <div>
    <!--$route代表当前加载的路由对象,包含params参数，它是一个对象，里面包含一个叫做name的值-->
    {{ name }}
  </div>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: 'sun'
      }
    },
    // 在路由发生变化，组件被复用的情况时被调用
    beforeRouteUpdate(to, from, next) {
      console.log(to.name,from.name);
    }
  }
</script>

四、路由源信息

  meta里面可以存放一些需要定义的信息，比如页面是否需要一些权限，或者一些其他信息，然后在路由前置守卫里做一些处理。

  • 以下是一个更改about的title为“关于”，其他页面为“admin”的例子：
  • src/lib/util.js
export const setTitle = (title) => {
  window.document.title = title || 'admin'
}
  • src/router/router.js
 {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 懒加载
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
    props: {
      food: 'banana'
    },
    meta: {
      title: '关于'
    }
  },
  • src/router/index.js
// 注册一个全局前置守卫
// to,from,next都是路由对象，to代表即将跳转的页面，from是即将离开的路由对象，next是一个函数
router.beforeEach((to, from, next) => {
  to.meta && setTitle(to.meta.title)
  if (to.name !== 'login') {
    // 如果已经登陆则跳转
    if (HAS_LOGINED) next()
    // 如果为登陆，则先登录，里面可以传入name对象，或path，或路径
    else next({ name: 'login' })
  } else {
    if (HAS_LOGINED) next({ name: 'home' })
    else next()
  }
})

五、路由的切换动效

页面的切换就是一个组件注销，一个组件加载，在vue基础里面有提到组件的过渡，能够为一个组件的显示
和隐藏都设置一个过度效果，同样也能为一个页面设置一个过渡效果。多个组件使用过渡效果需要使用
<transition-group></transition-group>（只需要包住一个视图渲染组件则只需要）包住视图渲染组件<router-view/>

1. 所有页面动效

  • src/App.vue
<!--一个示例，即运行vue时的页面-->
<template>
  <div id="app">
    <div id="nav">
      <!--封装了一个a标签，里面有一个重要属性：to，它指定的值是一个路径-->
      <router-link v-bind:to="{name: 'home'}">Home</router-link> |
      <!--命名路由，可以通过指定name来跳转到相应界面-->
      <router-link v-bind:to="{name: 'about'}">About</router-link>
    </div>
    <transition-group name="router">
    <!--是一个视图渲染组件-->
    <router-view key="default"/>
    <!--命名视图-->
    <router-view name="email" key="email"/>
    <router-view name="tel" key="tel"/>
    </transition-group>
  </div>
</template>

<style lang="less">
/*可以通过css来制作添加动态效果*/
/*首先设置页面进入的效果*/
/*router-enter代表页面没有显示，但即将显示的状态*/
.router-enter {
  /*设置透明度为零*/
  opacity: 0;
}
/*设置组件从没有到有的过程的动态的效果*/
.router-enter-active {
  /*使用transition来给opacity添加效果，时间设置1s ease效果*/
  transition: opacity 1s ease;
}
/*router-enter-to来设置页面完全显示之后的效果 让其透明度变为1*/
.router-enter-to {
  opacity: 1;
}

/*在此处设置页面离开的效果*/
.router-leave {
  /*设置透明度为零*/
  opacity: 1;
}
/*设置组件从没有到有的过程的动态的效果*/
.router-leave-active {
  /*使用transition来给opacity添加效果，时间设置1s ease效果*/
  transition: opacity 1s ease;
}
/*router-enter-to来设置页面完全显示之后的效果 让其透明度变为1*/
.router-leave-to {
  opacity: 0;
}


#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

2. 单独页面动效

  • src/App.vue
<!--一个示例，即运行vue时的页面-->
<template>
  <div id="app">
    <div id="nav">
      <!--封装了一个a标签，里面有一个重要属性：to，它指定的值是一个路径-->
      <router-link v-bind:to="{name: 'home'}">Home</router-link> |
      <!--命名路由，可以通过指定name来跳转到相应界面-->
      <router-link v-bind:to="{name: 'about'}">About</router-link>
    </div>
    <transition-group :name="routerTransition">
    <!--是一个视图渲染组件-->
    <router-view key="default"/>
    <!--命名视图-->
    <router-view name="email" key="email"/>
    <router-view name="tel" key="tel"/>
    </transition-group>
  </div>
</template>

<script>
  export default {
    watch: {
      // 监听路由对象的变化，to代表当前路由对象
      '$route' (to) {
        // 先判断to里是否有query字段 && 在to的query里找专门为这个页面设置的动效的name值 && 如果前面的
        //都满足，则将routerTransition改为query里的transitionName
        // 通过http://localhost:8080/#/about?transitionName=router 将transitionName=router
        //传入query，就有了动效
        to.query && to.query.transitionName && (this.routerTransition = to.query.transitionName)
      }
    }
  }
</script>

<style lang="less">
/*可以通过css来制作添加动态效果*/
/*首先设置页面进入的效果*/
/*router-enter代表页面没有显示，但即将显示的状态*/
.router-enter {
  /*设置透明度为零*/
  opacity: 0;
}
/*设置组件从没有到有的过程的动态的效果*/
.router-enter-active {
  /*使用transition来给opacity添加效果，时间设置1s ease效果*/
  transition: opacity 1s ease;
}
/*router-enter-to来设置页面完全显示之后的效果 让其透明度变为1*/
.router-enter-to {
  opacity: 1;
}

/*在此处设置页面离开的效果*/
.router-leave {
  /*设置透明度为零*/
  opacity: 1;
}
/*设置组件从没有到有的过程的动态的效果*/
.router-leave-active {
  /*使用transition来给opacity添加效果，时间设置1s ease效果*/
  transition: opacity 1s ease;
}
/*router-enter-to来设置页面完全显示之后的效果 让其透明度变为1*/
.router-leave-to {
  opacity: 0;
}


#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
miracleo_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 路由
weixin_68416699的博客
09-16 1411
vue 路由
vue3基础之vue-router4的二级路由使用
weixin_64740434的博客
08-13 876
【代码】vue3基础之vue-router4的二级路由使用。
vue3学习笔记
最新发布
qq_43276836的博客
07-02 802
自定义事件发射this.$emit("todo-added",参数);v-on监听事件触发函数读取事件参数。
vue路由详解 --基础
weixin_44170824的博客
11-20 226
vue路由详解 --基础 1.router-link 和router-view组件 router-link相当于封装了一个a标签 router-view为组件显示的位置 <router-link to="/"></router-link> <keep-alive> <router-view class="mycont" v-if="$route.meta.keepAlive" to="/
(Vue3)动态(二级)路由的实现
2201_75474092的博客
04-12 809
【代码】(Vue3)动态(二级)路由的实现。
Vue中配置二级路由
qq_58671311的博客
08-11 921
二.在router下的index.js文件中添加路由规则，二级和三级路由中path路径直接写文件名即可。一.首先在需要创建二级路由下的地方新增文件夹。
vue 3 学习笔记 vue3 vue3学习笔记
10-18
Vue 3 学习笔记 本文是关于 Vue 3 的学习笔记，涵盖了 Vue 3 的基础知识点，包括 Setup、Reactive、Ref、计算属性、Watch、生命周期函数、父子组件通信、Hook 等。 一、Setup Setup 是 Vue 3 中的组合式 API 的...
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
vue3学习笔记，亲测有效，持续更新
06-14
Vue3 是一款现代化的前端框架...以上就是 Vue3 学习笔记中的主要知识点，随着你深入学习，还会遇到更多如 Composition API、Suspense、Teleport 等高级特性。记得持续更新你的笔记，不断巩固和提升你的 Vue3 开发技能。
vue.js学习笔记:如何加载本地json文件
11-27
3. **挂载API路由**： 最后，将`apiRoutes`挂载到Express应用上，使其能够响应请求： ```javascript app.use('/api', apiRoutes); ``` 现在，你可以在浏览器中通过以下URL查看数据： - `...
vue-03-路由-二三级路由跳转
qq_40792800的博客
03-31 7161
1、新建项目之后，在 components 文件夹下，新建 about 文件夹 2、引入二级路由，同样的是在main.js 文件下引入，这四个组件都是在 components/about 这个文件夹下，所以路径要写对 //二级路由引入 import Contact from './components/about/Contact' import Delivery from './compon...
vue-路由精讲 二级路由和三级路由的作用
10-14
主要介绍了vue-路由精讲 二级路由和三级路由的作用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.js 二级路由/三级路由
热门推荐
毛没齐的博客
08-22 1万+
为什么要用二级和三级路由？ 当项目中 有多个 &lt;router-view&gt; 时，就必须使用分级路由； 如果路由不分级，又有多个 &lt;router-view&gt; ,全部都是定义为一级路由，那么项目中的 &lt;router-view&gt; 的内容显示就会混乱；这是不友好的； 如果对路由进行分级，那么当触发某个二级或三级路由时，此路由就会将对应组件内容传给自己的父级路由组件...
vue3设置路由path:‘*‘报错解决方法
weixin_45534301的博客
02-27 767
vue3设置路由path: '*'报错解决方法
vue-路由精讲 - 二级路由和三级路由
weixin_30951231的博客
08-05 363
1.我们继续上一个案例 vue -- 路由精讲制作导航 -- 从无到有 ，在 about文件夹下 创建一些文件夹。如下： 2. 编写about.vue代码。当我们点击导航中 “关于我们” ，就会显示该部分内容。代码中写了四个可供点击后可以跳转的模块。和 <router-view></router-view> 表示你点击了哪个组件，哪个组件就会渲染到这...
vue-router
u014105655的博客
11-08 274
vue-router 使用记录
关于vue3级路由的问题
lornall的博客
05-24 706
router.js的写法：二级路由的component写layout,childern里是可变换的地方，也就是真正二级路由页面变化的地方。比如一个后台管理系统。二级路由里头的部分也需要变化。比如页面分成两部分，左侧是菜单，右侧是变化的部分。在appmain这个地方再进行布局，比如 <menu /> <router-view>但是修改路由会涉及到左侧导航菜单渲染和tag-view的部分，尽量不要改路由。直接在页面里进行功能实现就行。比如菜单变换时用v-if显示不同的组件。二级路由 一般放在layout里。
vue二级路由的配置
KongYue1202的博客
08-24 709
二级路由的配置 在router中配置路由 import Vue from 'vue' import VueRouter from 'vue-router' // @ 指向src 用./容易混 import Comingsoon from '@/views/Film/Comingsoon' import Nowplaying from '@/views/Film/Nowplaying' import Mess from '@/views/Mess' import Person from '@/views/P
vue路由配置（vue2和vue3不同之处）
关于光在阳光下被反射的博客
08-03 760
vue2中路由的配置和vue3中的路由配置
Vue学习笔记：从环境搭建到项目实战
本资源是一份详细的Vue前端开发学习笔记，涵盖了从基础入门到实战项目的全过程，适合初学者和希望进一步提升Vue技能的开发者参考。以下是主要内容概要： 1. **环境搭建**： - 使用Node.js和npm进行环境配置，通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值