目录
一、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 完整的导航解析流程
- 导航被触发
- 在失活的组件里调用 beforeRouteLeave 守卫
- 调用全局的 beforeEach 守卫
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)
- 在路由配置里调用 beforeEnter
- 解析异步路由组件
- 在被激活的组件里调用 beforeRouteEnter
- 调用全局的 beforeResolve 守卫 (2.5+)
- 导航被确认
- 调用全局的 afterEach 钩子
- 触发 DOM 更新
- 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入