1.定义路由表
1.在 src 下创建 router 目录，并在目录里创建 index.js 文件
js
import { createRouter, createWebHashHistory } from "vue-router"
const routes = [
{
// 路由地址
path: "/",
// 对应路由显示组件
component: () => import("@/views/index.vue"),
},
{
// 路由地址
path: "/login",
// 对应路由显示组件
component: () => import("@/views/login.vue"),
},
{
// 路由地址
path: "/cart",
// 对应路由显示组件
component: () => import("@/views/cart.vue"),
},
]
// 使用 createRouter 创建路由实例
const router = createRouter({
// 确定路由模式,当前使用hash模式
history: createWebHashHistory(),
// 定义路由表
routes
});
// 导出
export default router;2. 在 入口文件引入，并挂载
js
import { createApp } from "vue";
import App from "./App.vue";
// 1. 导入路由实例
import router from './router'
const myApp = createApp(App);
// 2. 挂载路由实例
myApp.use(router)
myApp.mount("#app");3.在组件上使用 router-view 展示路由
js
<template>
<div>App 展示</div>
<router-view></router-view>
</template>2.页面中使用路由
1.页面中进行路由跳转
1. 普通跳转
js
<template>
<div>首页页面</div>
<button @click="goPage">点击跳转</button>
</template>
<script>
export default {
methods: {
goPage() {
this.$router.push('/login')
}
}
}
</script>2. 替换当前页面
js
<template>
<div>首页页面</div>
<button @click="goPage">点击跳转</button>
</template>
<script>
export default {
methods: {
goPage() {
// 从页面 a 到 页面 b 页面 不会在历史记录中新增数据
this.$router.replace('/login')
}
}
}
</script>3. 路由传参
1.params 传参
js
<template>
<div>首页页面</div>
<button @click="goPage">点击跳转</button>
</template>
<script>
export default {
methods: {
goPage() {
this.$router.push('/login/10086/张三')
}
}
}
</script>
接收参数
js
<template>
<div>登录页面</div>
</template>
<script>
export default {
mounted() {
/*
$router 是路由提供给我们的 方法集合
内部包含多个跳转的方法
$route 是路由提供给我们的 数据集合
内部包含一些路由的信息，比如说传递过来的参数
*/
console.log(this.$route.params)
}
}
</script>2.query 传参
参数使用 ？ 进行拼接，参数之间用 & 隔开，不需要在路由表中定义
js
<template>
<div>首页页面</div>
<button @click="goPage">点击跳转</button>
</template>
<script>
export default {
methods: {
goPage() {
this.$router.push({
name:'login',
query:{
id: 10086,
name: '张三'
}
})
}
}
}
</script>
// 接收参数
this.$router.query 就是传递的参数3.嵌套路由
点击顶栏导航按钮。页面跳转。导航栏保持不变。页面改变
js
import { createRouter, createWebHashHistory } from "vue-router"
const routes = [
{
path: "/",
name: '/',
component: () => import("@/views/index.vue"),
},
{
path: "/login",
name: 'login',
component: () => import("@/views/login.vue"),
},
{
path: "/cart",
name: 'cart',
component: () => import("@/views/cart.vue"),
},
{
path: "/banner",
name: 'banner',
component: () => import("@/views/banner/index.vue"),
children:[
{
path: "addImg",
name: 'addImg',
component: () => import("@/views/banner/components/addImg.vue"),
},
{
path: "imgList",
name: 'imgList',
component: () => import("@/views/banner/components/imgList.vue"),
}
]
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
// 在 banner 展示对应的 子路由
<template>
<div>轮播图展示页</div>
<router-link to="/banner/imgList">跳转到轮播图列表</router-link>
<router-link to="/banner/addImg">跳转到轮播图添加</router-link>
<router-view></router-view>
</template>4. vue-router 的懒加载
Vue-router 的懒加载是指在路由被访问时才加载相应的组件，而不是在应用初始化时就加载所有的组件。这样可以提高应用的性能，减少初始加载时间。
在 Vue-router 中，可以使用 import() 函数来实现懒加载。懒加载的语法如下：
javascript
component: () => import('./components/ExampleComponent.vue')当路由被访问时，import() 函数会动态地加载相应的组件。这样可以将组件的代码分割成多个小块，只有在需要时才加载，而不是一次性加载所有的组件。
懒加载还可以通过 Webpack 的代码分割功能来实现。在 Webpack 的配置文件中，可以使用 import 函数的 webpackChunkName 注释来给生成的代码块命名，方便调试和管理。
总的来说，懒加载可以提高应用的性能，减少初始加载时间，提升用户体验。同时，懒加载也可以更好地管理和组织组件的代码，使项目结构更清晰。
5.路由守卫
beforeEach 是 Vue-router 中的一个导航守卫，用于在路由切换之前进行一些操作或者拦截导航。
在 Vue-router 中，可以通过 router.beforeEach 方法注册 beforeEach 导航守卫。它接收一个回调函数作为参数，这个回调函数会在每次路由切换之前被调用。
beforeEach 的回调函数接收三个参数：to、from 和 next。其中，to 表示即将进入的路由对象，from 表示即将离开的路由对象，next 是一个函数，用于控制路由的行为。
在 beforeEach 回调函数中，可以进行一些操作，比如检查用户是否已登录、权限验证、页面访问记录等。根据这些操作的结果，可以选择调用 next 函数来继续路由的导航，或者中断导航。
如果在 beforeEach 中调用 next 函数并传入参数，可以控制路由的行为。常见的参数有：
next()：继续路由导航，进入下一个钩子或者路由组件。next(false)：中断路由导航，停留在当前路由。next('/path')：中断当前导航，重定向到指定的路径。
通过使用 beforeEach 导航守卫，可以在路由切换之前进行一些操作，实现权限控制、页面访问记录等功能，提升应用的用户体验和安全性。