路由 Router

安装

npm install vue-router@4

yarn add vue-router@4

一、配置路由，新建 \router\index.js 路由文件

import { createRouter, createWebHashHistory } from 'vue-router/dist/vue-router';

import HelloWorld from '../components/QuickStart/HelloWorld.vue';
import Edit from '../components/ElementTest/Edit.vue';
import BlogPost from '../components/BasicTest/BlogPost.vue';
import Login from '../views/login/Index.vue';
import GetTest from '../views/FetchTest/GetTest.vue';

const routes = [
    { path: '/', component: Edit },
    { path: '/BlogPost', name: 'BlogPost', component: BlogPost },
    { path: '/HelloWorld', name: 'HelloWorld', component: HelloWorld },
    { path: '/Login', name: 'Login', component: Login },
    { path: '/GetTest', name: 'GetTest', component: GetTest },
];

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

export default router;

　在main.js中使用路由

import router from './router/index'

app.use(router)
app.mount('#app')

　二、模块中使用路由

路由组件的显示占位符放在 app.vue 中

 <router-view></router-view>

路由链接，导航

 <router-link to="/BlogPost">BlogPost</router-link>|
<router-link to="HelloWorld">HelloWorld</router-link>

三、组件中使用路由

<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
function gomodal() {
    router.push('/BlogPost');
}
    
</script>