vue_03路由

概念

Vue属于单页应用（SPA），即整个应用程序中只有一个html页面。

在单页应用中（SPA），由于只是更改DOM来模拟多页面，所以页面浏览历史记录的功能就丧失了。此时，就需要前端路由来实现浏览历史记录的功能。

添加路由

进入dos，切换目录到项目下

例如：项目目录为：D:\workspace\qd\demo04，则dos如下

输入命令

yarn add vue-router

执行命令

yarn list

或者

你还可以使用--pattern参数来过滤依赖项列表。例如，要查看包含"vue-router"的依赖项，可以运行以下命令：

yarn list --pattern *vue-router*

配置路由

在src目录下创建router目录

在router目录下创建index.ts的文件名，用于配置路由

在index.ts文件中配置路由

import {createRouter,createWebHistory,type RouteRecordRaw} from 'vue-router'
const routes:RouteRecordRaw[]=[
//    {
//     path:"/",
//     component:import("../components/HelloWorld.vue")
//    }
]
const router=createRouter({
    history:createWebHistory(),
    routes
})

export default router

在main.ts文件中使用路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

常用控件

• <router-link to="对应路由的path">显示的文本</router-link>
• <router-view/>：用于指定组件显示的位置

<template>
	 <nav>
		<!-- 使用 router-link 组件来导航. to属性指定导航地址-->
	    <!-- <router-link to="/">Home</router-link> |
	    <router-link to="/about">About</router-link> -->
	  </nav>
	 <!-- 路由出口（路由匹配到的组件将渲染在这里） -->
	  <router-view/>
</template>

或者

  <template>
    <div class="app">
      <h2 class="title">Vue路由测试</h2>
      <!-- 导航区 -->
      <div class="navigate">
        <RouterLink to="/home" active-class="active">首页</RouterLink>
        <RouterLink to="/news" active-class="active">新闻</RouterLink>
        <RouterLink to="/about" active-class="active">关于</RouterLink>
      </div>
      <!-- 展示区 -->
      <div class="main-content">
        <RouterView></RouterView>
      </div>
    </div>
  </template>
  <script lang="ts" setup name="App">
    import {RouterLink,RouterView} from 'vue-router'  
  </script>

通过脚本进行跳转

<template>
  <div>
    <button @click="toLogin">跳转</button>
  </div>
</template>
<script setup lang="ts">
 
 import { useRouter } from 'vue-router';
 
 
 const router =useRouter();
 //按钮1路由跳转
 function toLogin(){
   router.push({path:'/indexLeft'})
 }
</script>
<style scoped>

</style>