【静态路由：vue3静态路由例题】

一、安装

1、安装

创建新项目demo4（也可以不创建，用以前的项目），在vue项目的目录下，下面任意命令进行安装（建议yarn方式）
yarn add vue-router@4
npm install vue-router@4

2、卸载

yarn remove vue-router@4
npm uninstall vue-router@4

3、查看安装是否成功

在项目的package.json文件中，查看是否有vue-router。如下图

二、静态路由

1、文件结构,三个文件里文件内容任意

2、在src文件夹中创建router文件夹，在其中创建index.js文件

3、main.js文件内容

4、app.vue

下面代码RouterLink使用router-link等语法都可以。此处使用的是RouterLink

5、运行效果

单击某个选项，显示对应文件内容（未设置样式，实现功能为主）

三、例题：实现布局：上中下三部分，在左侧单击，右侧显示内容的功能模块

1、修改first.vue中的文件内容，实现上中下的布局方式

预计效果如下：

2、修改app.vue中代码

3、修改first.vue，添加左侧菜单

四、嵌套路由准备工作(新的例题)

在components里，创建几个vue文件，用于测试使用
创建one.vue,two.vue和first.vue三个文件，文件内容任意

步骤1：新增路由的配置文件src\router\index.js：在src下，创建文件夹，名字是router，在该文件夹下创建index.js文件

步骤2：index.js文件的内容

JavaScript
import { createRouter, createWebHashHistory } from 'vue-router'

import First  from '../components/first'
import One  from '../components/one'
import Two  from '../components/two'
const routes=[
    {
        path: '/',
        component: First,
        children:[
            {
                 path: '/one',
                 component: One
            },
            {
               path: '/two',
               component: Two
            }
         ]
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
  })

export default router

步骤3：main.js文件内容

步骤4：app.vue的设置

步骤5：first.vue的设置

下图中，第3，4行斜杠后面的路径，是在第2步骤时候，index.js文件里定义的路径。黑色文字的one和two是单击跳转的载体。

六、将前面静态和嵌套路由例题，合并为一个例题

目标：单击左上方的页面2，出现新的子菜单

1、添加对应的文件夹page2和文件（OnePage.vue，TwoPage.vue），如果已经存在可以忽略此步骤

2、配置路由：router\index.js

参考代码

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
    {
      path:"/",
      component:()=>import("@/components/UserPage1")
    },
    {
      path:"/UserPage2",
      component:()=>import("@/components/UserPage2"),
      children:[
        {
          path:"/OnePage",
          component:()=>import("@/components/page2/OnePage"),
        },
        {
          path:"/TwoPage",
          component:()=>import("@/components/page2/TwoPage"),
        }
      ]
    },
    {
      path:"/UserPage3",
      component:()=>import("@/components/UserPage3")
    }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3、修改UserPage2.vue页面的内容

4、测试效果

单击左上方页面2的菜单，可以出现子菜单，但样式需要修改

5、给userPage2添加样式

6、测试

注意：app.vue里设置的样式，是全局的，会影响之后的所有组件中的显示