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 组件内守卫(略)

beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

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总篇目录