vue3 router实践

实践一下

install

 // install vue-router
npm install vue-router@4

页面新建src/routes/index.js

// src/routes/index.js

import { createRouter, createWebHistory } from 'vue-router';
// createRouter ： 创建router对象
const routes = [
	{
		path: '/',
		name: 'Home',
		// lazy load
		component: () => import('../views/Home'),
	},
	{
		path: '/login',
		name: 'Login',
		component: () => import('../views/Login'),
	},
];
const router = createRouter({
	routes: routes,
	// 使用history
	history: createWebHistory(),
});
//导出router便于在入口文件挂载
export default router;

入口文件导入

//main.js
// 使用vue router
import router from './routes';
import { createApp } from 'vue';
// 导入 vue router
import router from './routes';
import App from './App.vue';
const app = createApp(App);
// 使用router
app.use(router).mount('#app');

编程式导航

 // home.vue
import router from '@/routes';
const jumpLogin = () => {
	router.push({
		path: '/login',
	});
};