vue路由详解

vue路由详解目录

1. 什么是路由

2. Vue Router的使用步骤

2.1 安装

2.2 创建路由

2.3 使用路由

2.4 声明标签

2.5 路由切换组件的方式

3. 子路由

3.1 配置

3.2 声明标签

3.3 设置index属性

---

1. 什么是路由

• 路由，决定从起点到终点的路径的进程
• 在前端工程中，路由指的是根据不同的访问路径，展示不同组件的内容
• Vue Router是Vue.js的官方路由

2. Vue Router的使用步骤

2.1 安装

安装vue-router：npm install vue-router@4

2.2 创建路由

在src/router/index.js中创建路由器，并导出

//导入vue-router
import { createRouter, createWebHistory } from 'vue-router'

//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'

//定义路由关系
const routes = [
    { path: '/login', component: LoginVue },
    { path: '/', component: LayoutVue }
]

//创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

//导出路由
export default router

2.3 使用路由

在vue应用实例中使用vue-router

//main.js文件
import router from '@/router'
app.use(router)

2.4 声明标签

声明router-view标签，展示组件内容

<!-- App.vue文件的template -->
<template>
   <router-view></router-view>
</template>

2.5 路由切换组件的方式

import { useRouter } from 'vue-router'
const router = useRouter();
router.push('/')

3. 子路由

3.1 配置

在index.js中配置子路由

//定义路由关系
const routes = [
    { path: '/login', component: LoginVue },
    {
        path: '/',
        component: LayoutVue,
        //重定向
        redirect: '/article/manage',
        //子路由
        children: [
            { path: '/article/category', component: ArticleCategoryVue },
            { path: '/article/manage', component: ArticleManageVue },
            { path: '/user/info', component: UserInfoVue },
            { path: '/user/avatar', component: UserAvatarVue },
            { path: '/user/resetPassword', component: UserResetPasswordVue }
        ]
    }
]

3.2 声明标签

在需要展示的地方声明router-view标签：<router-view></router-view>

3.3 设置index属性

设置index属性，即点击后的路由路径

笔记参考