第一节:vue3 配置路由

1.安装router插件npm install vue-router@4或者yarn add vue-router@4

2.新建router文件夹以及router里边的index.js:里边主要配置路由

import {createRouter,createWebHashHistory} from 'vue-router'
// 1.新的页面导入进来
import Home from '../view/Home.vue'
import Login from '../view/Login.vue'
// 2.写路由的地方
const routes = [
    {
        path:'/',
        name:'home',
        component:Home
    },
    {
        path:'/login',
        name:'login',
        component:Login,
    }
];
const router = createRouter({
    //  3.内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
  })
  
  export default router;

3.在main.js页面里边进行 导入路由 挂载路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 导入路由
import router from './router/index'

 //创建并挂载根实例
 const app =createApp(App)
 app.use(router)
//  挂载根应用
 app.mount('#app')

4.测试一下 看路由有没有配置成功 随便创建一个页面里边随便写点东西

这是Home页面

<template>
  <h1>用户页面</h1>
</template>

<script>
export default {

}
</script>

<style>

</style>

5.最后一步也是最关键在app页面使用<router-view></router-view>显示子组件的效果

效果图

相关推荐
whisperrr.1 小时前
【JavaWeb12】数据交换与异步请求:JSON与Ajax的绝妙搭配是否塑造了Web的交互革命?
前端·ajax·json
烂蜻蜓2 小时前
前端已死?什么是前端
开发语言·前端·javascript·vue.js·uni-app
谢尔登4 小时前
Vue 和 React 的异同点
前端·vue.js·react.js
祈澈菇凉8 小时前
Webpack的基本功能有哪些
前端·javascript·vue.js
小纯洁w8 小时前
Webpack 的 require.context 和 Vite 的 import.meta.glob 的详细介绍和使用
前端·webpack·node.js
想睡好9 小时前
css文本属性
前端·css
qianmoQ9 小时前
第三章:组件开发实战 - 第五节 - Tailwind CSS 响应式导航栏实现
前端·css
zhoupenghui1689 小时前
golang时间相关函数总结
服务器·前端·golang·time
White graces9 小时前
正则表达式效验邮箱格式, 手机号格式, 密码长度
前端·spring boot·spring·正则表达式·java-ee·maven·intellij-idea
庸俗今天不摸鱼9 小时前
Canvas进阶-4、边界检测(流光,鼠标拖尾)
开发语言·前端·javascript·计算机外设