安装vue-route
npm i vue-router@4 --save
创建router.js
在项目中创建router目录，在其中创建router.js定义规划路由
在这段代码中制定了三个path，分别对应三个组件。为了方便管理，三个组件统一存放在views目录下
import {createRouter, createWebHashHistory} from 'vue-router'
import Center from '../views/CenterView.vue'
import Film from '../views/FilmView.vue'
import Cinema from '../views/CinemaView.vue'
const routes = [
{
path:"/film",
component:Film
},
{
path:"/center",
component:Center
},
{
path:"/cinema",
component:Cinema
}
]
const router = createRouter({
history:createWebHashHistory(),
routes
})
export default router在main.js中引入router
import { createApp } from 'vue'
import App from './app.vue'
import router from './router/index'
var app = createApp(App)
app.use(router)
app.mount('#app')在根组件中插入路由容器
<template>
<div>app</div>
<!-- 路由容器 -->
<router-view></router-view>
</template>根据不同url可以看到不同组件被加载
router-link
请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。
<template>
<p>
<router-link to="/center"> Center </router-link>
<router-link to="/film"> Film </router-link>
<router-link to="/cinema"> Cinema </router-link>
</p>
<!-- 路由容器 -->
<router-view></router-view>
</template>
<script></script>
