02_配置 Vue 3.0 路由文件

1.安装 vue-router@next

npm i vue-router@next -D

2.使用步骤

　　-1. 创建 router.js

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

// 定义组件，注意 一定要使用文件全名 包括文件后缀
import Login from '../view/login/login.vue'

// 定义路由
const routes = [
    // vue2.x 一致
    { path: '/', name: 'Login', component: Login },
]

// 创建路由实列
const router = createRouter({
    // history: routerHistory,  // history
    history: createWebHashHistory(), // hash
    routes,
});

export default router;

　　-2. main.js 中使用

import { createApp } from 'vue'
import App from './App.vue'
// 引入 router
import router from './router/index'

import './index.css'


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

　　-3. app.vue 中添加 <router-view >作为路由占位符

<template>
  <!-- 路由占位符 -->
  <router-view></router-view>
</template>

<script>

export default {
  name: 'App',
  components: {
    
  }
}
</script>