目录

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>