Vue学习笔记：路由开发 Part 01

安装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可以看到不同组件被加载