vue-router实现简单vue多页切换、嵌套路由、路由跳转的步骤和报错

npm i vue-router@3.6.5          //npm
//or
yarn add vue-router@3.6.5       //yarn

<template>
  <h1>Home</h1>
</template>
<script>
export default {
  data() {
    return {}
  },
}
</script>

<template>
  <h1>Users</h1>
</template>
<script>
export default {
  data() {
    return {}
  },
}
</script>

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import User from '../views/User.vue'
import Main from '../views/Main.vue'
Vue.use(VueRouter)
//一、建立路由组件

const routes = [
  { path: '/home', component: Home },
  { path: '/user', component: User },
]

const router = new VueRouter({
  routes, // (缩写) 至关于 routes: routes
})
export default router

<template>
  <div id="app">
    <!-- 路由入口 -->
    <!-- 路由立室到的组件将衬着正在那面 -->
    <router-view></router-view>
  </div>
</template>

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

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import User from '../views/User.vue'
import Main from '../views/Main.vue'
Vue.use(VueRouter)
//一、创立路由组件
//两、将路由取组件入止映照
const routes = [
  //主路由
  {
    path: '/',
    component: Main,
    children: [
      //子路由
      { path: '/home', component: Home },
      { path: '/user', component: User },
    ],
  },
  { path: '/home', component: Home },
  { path: '/user', component: User },
]
// 3. 建立 router 真例，而后传 `routes` 装备
// 您借否以传其余设备参数, 不外先那么简朴着吧。
const router = new VueRouter({
  routes, // (缩写) 至关于 routes: routes
})
export default router

<template>
  <div>
    //页里规划
    <el-container>
      <el-aside width="二00px">
        <co妹妹on-aside />
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <!-- 路由入口 -->
          <!-- 路由立室到的组件将衬着正在那面 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Co妹妹onAside from '../components/Co妹妹onAside.vue'// 引进侧边栏组件(main.vue的样式)
export default {
  data() {
    return {}
  },
  //引进组件
  components: {
    Co妹妹onAside,
  },
}
</script>

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //洞开eslint校验
})