vue3.0路由配置

一.安装

cnpm i vue-router@next -D

二.使用步骤

1.创建Router对象和路由配置——routerIndex.js

import {createRouter, createWebHashHistory, createWebHistory} from "vue-router"

// 1. 定义路由组件， 注意，这里一定要使用 文件的全名（包含文件后缀名）
import countIndex from "../pages/count/countIndex.vue";
import langshanIndex from "../pages/langshan/langshanIndex.vue";
import ScreenIndex from "../pages/screen/ScreenIndex.vue";

// 2. 定义路由配置
const routes = [
  { 
    path: "/",
    redirect: '/countIndex'
  },
  { path: "/countIndex", component: countIndex },
  { path: "/langshanIndex", component: langshanIndex },
  { path: "/screen", component: ScreenIndex },
];

// 3. 创建路由实例
const router = createRouter({
  // 4. 采用hash 模式
  history: createWebHashHistory(),
  // 采用 history 模式
  // history: createWebHistory(),
  routes, // short for `routes: routes`
});

export default router

2.Router 当做插件引用进来——main.js

import { createApp } from 'vue'
// 引入路由对象实例
import routerIndex from './router/routerIndex'
import storeIndex from './store/storeIndex'
import App from './App.vue'
import './index.css'
import './assets/mockjs/mockData.js'

const app = createApp(App)
// 使用配置的路由
app.use(routerIndex)
app.use(storeIndex)
app.mount('#app')

3.在APP.VUE写入

<router-view />