vue3.0中使用vue-router

提示：项目是使用vue3+vite构建的

1、安装vue-router

npm install vue-router@next -S

2、在src的目录下创建一个文件夹router

• router/index.js文件

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/demo',
    component: () => import('../views/Demo.vue')
  },
  {
    path: '/film',
    component: () => import('../views/Film.vue')
  }
];


const router = createRouter({
  history: createWebHashHistory(),  // hash路由模式
  // history: createWebHistory(),  // history路由模式
  routes
});

export default router;

• 在main.js文件中引入
  
• 此时已经成功引入vue-router了，接下来看如何使用

<template>
  <div class="box">
    <router-link to="/">home</router-link> |
    <router-link to="/demo">demo</router-link> |
    <router-link to="/film">film</router-link>
    <router-view></router-view>
  </div>
</template>