路由入门

路由构成

Vue 的路由基础由2个基础的组件构成 :

router-link 和 router-view， router-link 可以理解为一个 链接，而  router-view 可以理解为点击链接后展示对应组件的视图。

第一个路由示例 [ path 模式 ]

1. 创建2个组件 Home.vue 和 About.vue

创建位置 /src/pages/Home.vue 和 /src/pages/About.vue

# Home.vue
<template>
	<div>首页</div>
</template>

# About.vue
<template>
	<div>关于我们</div>
</template>

1.2 在 main.js 配置及应用路由

路由项配置语法 :

{ path : '路由路径'     , component : ()=> import(对应的页面组件.vue)  }

如 : /src/main.js

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

// 1. 定义路由页面组件.
// 路径使用相对路径，相对于当前定义 js 文件
const Home  = import("./pages/Home.vue");
const About = import("./pages/About.vue");

// 2. 定义一些路由，每个路由都需要映射到一个页面组件。
const routes = [
	{ path : '/'     , component : ()=> import("./pages/Home.vue")  },
	{ path : '/about', component : ()=> import("./pages/About.vue") },
]

// 3. 创建路由实例并传递 `routes` 配置
import { createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
	history : createWebHashHistory(),
	routes  : routes
});

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

1.3 在 app.vue 内实现路由展示

<template>
	<div>
		<router-link to="/">系统首页</router-link>
		  
		<router-link to="/About">关于我们</router-link>
		  
		<span @click="gotoAbout">使用 JS 跳转</span>
	</div>
	<div style="margin-top:15px;">
		<router-view></router-view>
	</div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
function gotoAbout(){
	router.push({path:"/About"});
}
</script>
<style>
</style>

js 实现路由跳转

<script setup>
// 结构路由 
import { useRouter } from "vue-router";
// 实例化路由操作对象
const router = useRouter();
// 实现跳转
function gotoAbout(){
	router.push({path:"/About"});
}
</script>

至此我们就完成了第一个 Vue 路由的体验，您可以亲自试试，然后理解一下 Vue 路由的创建流程。下一节我们将讲解将路由抽离为一个 js 文件，从而更清晰地梳理页面关系和管理路由。