Java登陆第三十九天——Router路由入门

什么是路由？
	类似于Servlet的映射路径。
	路由可以让，不同的URL展示不同的页面。

Router

Router是Vue衍生的生态系统之一，所以需要单独安装。

路由案例需求

1 安装依赖

还记得npm安装依赖指令吗？看这。

npm i vue-route

1-1 编写组件

略

2 编写路由配置

类似于Servlet的映射路径，需要在文件中编写路由配置信息。

2-1 创建src\router\testRouter.js

testRouter.js保存的就是路由配置信息。

/*
从vue-route中导入两个函数。
createRouter()创建路由对象。
createWebHashHistory()创建路由历史记录对象。
 */
import {createRouter, createWebHashHistory} from 'vue-router'
import Left from '../components/left.vue'
import Right from '../components/right.vue'

//传递一个匿名对象传参
const testRouter = createRouter({
    //history对象
    history: createWebHashHistory(),
    /*
    routers是一个数组，数组内是组件与映射路径对象。
        键path的值是映射路径URL，键component的值是组件名。
        键path的值也可以说是路由地址。
     */
    routes: [
        {path: '/left', component: Left},
        {path: '/right', component: Right}
    ]
});
//默认导出，在需要的地方导入该配置文件即可。
export default testRouter;

2-2 main.js中绑定路由对象。

import {createApp} from 'vue'
import App from './App.vue'
//导入路由对象
import testRouter from './router/testRouter'

let app = createApp(App)
//绑定路由对象
app.use(testRouter)
//挂载试图
app.mount("#app")

3 在组件中编写路由对应展示位置。

提供了两个双标签：<router-view>和<router-link>

语法格式如下：

<!-- router-view标签写在哪，哪里就是被映射的组件。(位置不限)-->
<router-view></router-view>

<!-- router-link标签负责跳转到某个组件。 -->
<router-link to="路由地址"></router-link>

3-1 编写APP.vue

App.vue

<script setup>
</script>

<template>
  <router-link to="/left">左</router-link> 丨
  <router-link to="/right">右</router-link>
  <router-view></router-view>
  <h3>APP尾部</h3>
</template>

<style scoped>
</style>

效果展示

路由是非常重要，也非常厉害的功能。