一、环境搭建
1.1 依赖下载
控制台输入npm install vue-router
1.2 注册路由服务
在 main.js 中添加路由信息
1.3 创建路由信息
javascript
// createRouter: 创建router实例对象
// createWebHashHistory: 创建history模式的路由
import { createRouter, createWebHistory } from "vue-router"
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'
import Home from "@/views/Home/index.vue"
import Category from "@/views/Category/index.vue"
// 定义路由
const routers = [
{
path:"/",
component:Layout,
children:[{
// 默认路由
path:"",
component:Home
},{
path:"category",
component:Category
}]
},{
path:"/login",
component:Login
}
]
// 创建router实例
const router = createRouter({
history:createWebHistory(),
routes:routers
})
// 导出router实例
export default router
二、代码说明
2.1 一级路由
2.1.1 注册
Layout 和 Login 为一级路由
在 App.vue 中创建一级路由出口
2.1.2 效果演示
切换路由时,页面内容整体替换
2.2 二级路由
2.2.1 注册
Home 和 Category 为 Layout
下的子路由
在 Layout 下创建二级路由出口
2.2.2 效果演示
由于 Home 设置为了默认路由 ,所有会自动加载
切换路径后,Home页面的内容部分修改