04vue-router

路由创建

1. 安装依赖

• vue-router官网
  pnpm add vue-router@4

2. 创建路由和对应页面
   src\router\index.js

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

import Layout from '../views/Main.vue'
import Login from '../views/login/index.vue'
// 引入vue-router 创建路由实例

const routes = [
  { 
    // http://localhost:5173/#/
    path: '/',
    name:"root",
    component: Layout
  },
  {
    // http://localhost:5173/#/login
    path: '/login',
    name:"login",
    component: Login

  }
]

export default createRouter({
  history: createWebHashHistory(), //路由匹配模式
  routes //路由配置
})

3. 挂载router到vue实例上

src\main.js

import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

4. 对应页面使用配置路由显示

src\App.vue

<template>
 <RouterView />
</template>

5. 编写页面
   src\views\Main.vue

   <template>
    <div>index</div>
   </template>
   <script setup></script>

src\views\login\index.vue

<template>
    <div>login</div>
</template>
<script setup></script>

6. 视频地址：

• 创建路由和对应页面