VUE3+vue-router4使用路由

1、下载vue3、vue-router4。

2.创建vue项目。

3.查看vue、vue-router版本。

打开package-lock.json查看配置

"packages": {

    "": {

      "name": "vue-router-test",

      "version": "0.1.0",

      "dependencies": {

        "core-js": "^3.6.5",

        "vue": "^3.0.0",

        "vue-router": "^4.0.12",

        "vuex": "^4.0.2"

      },

      "devDependencies": {

        "@vue/cli-plugin-babel": "~4.5.0",

        "@vue/cli-plugin-eslint": "~4.5.0",

        "@vue/cli-service": "~4.5.0",

        "@vue/compiler-sfc": "^3.0.0",

        "babel-eslint": "^10.1.0",

        "eslint": "^6.7.2",

        "eslint-plugin-vue": "^7.0.0"

      }

    },

如果版本不一致请安装新版本vue和router，重新创建项目

4.通过cli创建的项目有main.js。修改之

import {
  createApp
} from 'vue'
import {
  createRouter,
  createWebHashHistory
} from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      name: "home",
      component: () => import( /* webpackChunkName: "index" */ "@/components/home.vue"),
      meta: {
        title: "首页"
      }
    },
    {
      path: "/about",
      name: "about",
      component: () => import( /* webpackChunkName: "index" */ "@/components/about.vue"),
      meta: {
        title: "首页"
      }
    }
   
  ]
})

5.创建home.vue和about.vue

<template>
<div>About</div>
</template>


<template>
<div>Home</div>
</template>