vue路由跳转页面

目录

1、打开工程文件夹，cmd到命令窗口

2、安装vue-router

3、在src/router/index.js中创建路由器，并导出

4、在main.js中引入路由

5、声明router-view标签，展示组件内容

6、页面跳转

---

1、打开工程文件夹，cmd到命令窗口

2、安装vue-router

npm install vue-router@4

3、在src/router/index.js中创建路由器，并导出

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

//导入组件
import Article from '@/view/Article.vue'
import Login from '@/view/Login.vue'

//定义路由关系
const routes = [
    { path:'/article',component: Article },
    { path:'/',component: Login }
]

//创建路由器

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

//导出路由

export default router

4、在main.js中引入路由

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

import router from '@/router' //引入路由

const app = createApp(App);
app.use(router) //使用路由
app.mount('#app')

5、声明router-view标签，展示组件内容

<script setup>
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>

</style>

6、页面跳转

<script setup>
    import { login } from '@/api/login.js';
    import { ref } from 'vue';
    import { useRouter } from 'vue-router'; // 引入 useRouter

    // 定义响应式数据
    const user = ref({
        username: '',
        password: ''
    });

    // 在 setup() 函数中使用 useRouter()
    const router = useRouter();

    // 声明 search 函数
    const Login = async function() {
        // 文章搜索
        let data = await login({ ...user.value });
        // alert(data)
        //跳转页面
        router.push('/article');
    };
</script>