从0开始学VUE--使用Django+Vue 构建一个Web项目(5) vue-router 简介

vue-router 4.0和3.x也有了较大变化，使用老版本的方法无法正常使用。

安装

使用 npm install vue-router@next 安装最新版vue-router，安装后 在 package.json中可以看到版本号：

"dependencies": {
    "element-ui": "^2.14.1",
    "element3": "0.0.27",
    "vue": "^3.0.2",
    "vue-router": "^4.0.0-rc.5"
  },

使用

1. 添加 router/index.js 文件

import { createRouter,createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
// createRouter 创建路由实例
const routerHistory = createWebHistory()
const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: '/',
      component: Home
    }
  ]
})

// 抛出路由实例, 在 main.js 中引用
export default router

2.在main.js 中添加路由的引用，修改内容为**开头的两行

import { createApp } from &