Vue3.0组合式API(二)-----前端路由

一、router-link标签

1.1 路由跳转to选项

  • 基本写法
    <!-- to后面的路由跟router/index.ts中路由对应 -->
    <router-link to="/Shopping">购物车</router-link><br />
    

1.2 路由传参to选项

  • params传参
    // 传参页面:可用变量组合字符串给 :to,target表示点击标签新建窗口打开
    <router-link to="/Shopping/123" target="_blank">购物车</router-link>
    ****************************************************
    // 路由文件router/index.ts中定义路由格式
    ...
      {
      	// 此处定义路由/test/后面跟的是参数不是路由
        path: '/Shopping/:id',	
        name: '购物',	
        component: Shopping,
      },
    ...
    ****************************************************
    // 收参页面Shopping.vue文件中提取参数
    <template>
    <!-- 模板中提取 -->
      <h1>这是首页展示区{{ $route.params.id }}</h1>
    </template>
    
    <script lang="ts">
    import { defineComponent } from "vue";
    // 导入路由API函数
    import { useRoute } from "vue-router";
    
    export default defineComponent({
      name: "Shopping",
      // 后续剖析setup
      setup() {
        // 创建路由实例
        const route = useRoute();
        // 提取其中的参数:输出123
        console.log(route.params.id);
      },
    });
    </script>
    
    • 变量绑定::to等于v-bind:to ,表示等号右边的式子包含变量,若没有v-bind则表示右边全部是字符串
    • mustache语法:{{}},用在HTML里调用数据,例如<p>名字为:{{obj.name}}</p>
    • replace选项:添加replace,则表示进入此页面后,浏览器后退键会变灰不可用

1.3 路由跳转方法

  • App.vue文件内演示
    <template>
      <div id="nav">
        <!-- 监控点击事件,并调用函数 -->
        <button @click="forward">前进</button>
        <button @click="back">后退</button><br />
        <button @click="ToHome">首页</button><br />
        <button @click="ToShopping">购物车</button>
      </div>
      <!-- 展示当前路由所对应的组件 -->
      <router-view />
    </template>
    
    <script lang="ts">
    import { defineComponent } from "vue";
    // 导入路由API函数,生成路由实例
    import { useRouter } from "vue-router";
    
    export default defineComponent({
      setup() {
        // 返回路由实例
        const router = useRouter();
        // 定义组件内函数,ES6写法,并调用路由实例方法
        const forward = () => router.forward();
        const back = () => router.back();
        const ToHome = () => {
          router.push("/");
        };
        // 可以用ES6之前函数写法
        function ToShopping() {
          router.push("/shopping");
        }
        // 定义的函数和数据必须return出去,模板才能用
        return {
          forward,
          back,
          ToHome,
          ToShopping,
        };
      },
    });
    </script>
    

二、路由懒加载

  • 定义不要页面一次性加载完毕,用户哪个资源,就请求相应资源页面加载

  • 原写法:import Shopping from '../views/Shopping.vue'

  • 懒加载:const Shopping= () => import( '../views/Shopping.vue' ),Shopping为组件名

三、路由嵌套

即在主页面下还有几个分页面可以点

3.1 实现效果

  • 首页
    在这里插入图片描述
  • 点击购物车
    在这里插入图片描述
  • 点击大衣
    在这里插入图片描述
  • 点击鞋子
    在这里插入图片描述

3.2 实现代码

  • 路由router/index.ts
    import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
    import Home from '@/views/Home.vue'
    import Shopping from '@/views/Shopping.vue'
    // 懒加载:用到才加载
    const ShoppingCoat= () => import('@/views/ShoppingCoat.vue')
    const ShoppingShoe= () => import('@/views/ShoppingShoe.vue')
    
    const routes: Array<RouteRecordRaw> = [
      {									
    	path: '/',					
    	redirect:  '/home'								
      },
      {	
    	path: '/home',							
    	name: '首页',			
    	component: Home				 			
      },
      {	
    	path: '/shopping',			
    	name: '购物',			
    	component: Shopping,
    	// 注意Shopping页面必须有router-view标签,
    	// 否则不显示子路由页面
      	children:[{
          	path: 'coat',
          	name: '大衣',
          	component: ShoppingCoat
        	},
        	{
          	path: 'shoe',
          	name: '鞋子',
          	component: ShoppingShoe
        	}]			
      }
    ]
    
    const router = createRouter({
      history: createWebHistory(),
      routes
    })
    
    export default router
    
  • 各视图文件
    ***************src/App.vue*****************************
    <template>
      <router-link to="/home">首页</router-link>
      <router-link to="/shopping">购物车</router-link>
      <hr />
      <router-view />
    </template>
    
    ***************src/views/Home.vue**********************
    <template>这是首页展示区</template>
    
    ***************src/views/Shopping.vue******************
    <template>
      <router-link to="/shopping/coat">大衣</router-link>
      <router-link to="/shopping/shoe">鞋子</router-link>
      <hr />
      <!-- 在父组件中必须有此句来展示子路由的页面 -->
      <router-view />
    </template>
    
    ***************src/views/ShoppingCoat.vue***************
    <template>大衣展示区</template>
    
    ***************src/views/ShoppingShoe.vue***************
    <template>鞋子展示区</template>
    

四、导航守卫

  • 时机:当页面跳转时,触发
  • 功能:添加过度动画、逻辑判断、响应处理或拦截

4.1 全局导航守卫

  • router/index.ts文件
    ...
    // 以上原文件语句略
    const router = createRouter({
      history: createWebHistory(),
      routes
    })
    
    //***********前置钩子(常用于登录验证)***********//
    // from跳转前页面,to跳转后页面,next跳转函数
    router.beforeEach((to,from,next) => {	
    	// 自定义函数
    	console.log(from);			
    	// 必须要有这一条,否则会卡住
    	// 也可以next('/'),跳转到/路径
    	next();	
    	}
    )
    
    //***********后置钩子***********//
    // from跳转前页面,to跳转后页面
    router.afterEach((to,from) => {		
    	// 自定义函数
    	console.log(to);	
    	// 没有next函数				
    	}									
    )
    
    // 原文件语句
    export default router
    
  • 浏览器终端控制台
    在这里插入图片描述

4.2 路由独享守卫

  • 在router/index.ts文件中添加
    const routes = [
    	{
            path: '/Login',		
            name: 'Login'				
            component: Login,				 
        },
        {
            path: '/home', 						
            name: 'Home', 					
            component: Home,
            // 独享守卫仅有此函数,看4.4流程
            beforeEnter: (to,from,next) => {
           		// 若用户未验证身份,则扭送 /login,用在敏感路由上
    			router.beforeEach((to, from, next) => {
    			  // 释义:进入主页后,若下一个点击的路由不是Login,并且已登录变量为false,
    			  // 则扭送 /login
    			  if (to.name !== 'Login' && !isAuthenticated) next('/Login')
    			  else next()
    			})
    		}  
        }
    ]
    

4.3 组件内守卫(略)

beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave

4.4 完整的导航解析流程

  1. 导航被触发
  2. 在失活的组件里调用 beforeRouteLeave 守卫
  3. 调用全局的 beforeEach 守卫
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)
  5. 在路由配置里调用 beforeEnter
  6. 解析异步路由组件
  7. 在被激活的组件里调用 beforeRouteEnter
  8. 调用全局的 beforeResolve 守卫 (2.5+)
  9. 导航被确认
  10. 调用全局的 afterEach 钩子
  11. 触发 DOM 更新
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入

跳转至vue总篇目录

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值