router-view的使用

vu3中的router-view的使用及页面跳转

安装router

npm install vue-router@4
或者
yarn add vue-router@4

1.App.vue页面代码

<template>
	<router-view></router-view>
</template>
<script setup>
</script>
<style></style>

2.main.js代码

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from "./router"
import App from './App.vue'
import axios from "axios"
const app = createApp(App)

//全局注册，之后可在其他组件中发送数据，跨域访问
axios.defaults.baseURL = 'http://localhost:8080'
//axios挂载到vue实例
app.config.globalProperties.$axios = axios

app.use(router) //放在app.mount前面 
app.use(ElementPlus)
app.mount("#app");

3.在src下新建一个router文件夹，文件下的js文件代码示例如下

import {
	createRouter,
	createWebHistory
} from 'vue-router'
import Login from '../views/login.vue'

import Home from '../views/home.vue'
const routes = [{
	path: '/',
	redirect: '/login'
},
{
	path: '/login',
	name: 'Login',
	component: Login
},


{
	path: '/home',
	name: 'Home',
	component: Home,
	redirect: '/home/list',
	children: [
	

	]
}
]

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

export default router

页面跳转（以login.vue页面为例）

//引入
import { useRouter } from 'vue-router'
const router = useRouter();

登录成功后可以添加此段代码

        router.push({
          path: "/home",
        });