这篇文章是接着【三分钟快速搭建Vue3+webpack项目】的内容做的开发，有基础的可以跳过 【三分钟快速搭建Vue3+webpack项目】，直接看以下的内容。

Vue3的vue-router路由详解：

首先安装路由依赖模块：

npm install vue-router@4

所需代码文件如下图：
图1

aac4421b71344dc0931439f78dc83889.png

 

所需要的主要文件：index.html、index.js、App.vue


index.html：模板页面，项目中的代码编译之后都是放入到模板页面中id为app的元素这种。
代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

index.js：创建一个vue应用，将路由放入应用之中，并挂载到模板页面id为app的元素上。
代码如下：

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

// 1. 定义路由组件：这里直接用的对象数据，也可以导入其他组件。
const Main = { render(){ return '月影WEB 欢迎大家来学习各种技术知识！'} }
const Lists = { render(){ return '月影WEB-列表页面'} }
const Details = { render(){ return '月影WEB-详情页面'} }

// 2. 定义一些路由：每个路由都需要映射到一个组件。
const routes = [
    { path: '/', component: Main },
    { path: '/lists', component: Lists },
    { path: '/details', component: Details },
]

// 3. 创建路由实例并传递 `routes` 配置。
const router = createRouter({
    // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})

// 4.创建一个vue应用，将App组件和定义的路由放入到vue应用，并挂载到模板页面id为app的元素上。
createApp(App).use(router).mount('#app')

1. 定义路由组件：这里直接用的对象数据，也可以导入其他组件。
const Main = { render(){ return '月影WEB 欢迎大家来学习各种技术知识！'} }
const Lists = { render(){ return '月影WEB-列表页面'} }
const Details = { render(){ return '月影WEB-详情页面'} }

注意：Main、Lists 、Details 定义了三个路由组件，return后面就是每个路由组件展示的UI。

 

2. 定义一些路由：每个路由都需要映射到一个组件。
const routes = [
    { path: '/', component: Main },
    { path: '/lists', component: Lists },
    { path: '/details', component: Details },
]

注意：path是路由路径，也是地址栏会显示的路径，component是放路由组件的，每个路由路径都可以进行组件映射。

 

3. 创建路由实例并传递 `routes` 配置。
const router = createRouter({
    // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})

注意：这里只做了简单的配置，history是路由的模式，routes放定义的路由，createRouter创建路由实例。

 

4.创建一个vue应用，将App组件和定义的路由放入到vue应用，并挂载到模板页面id为app的元素上。
createApp(App).use(router).mount('#app')

 

App.vue：用来展示不同的路由页面UI。
代码如下：

<template>
    <router-view></router-view>
</template>
<script>
export default {

}
</script>

注意：<router-view>是用来展示路由对应的组件UI的。
 

启动服务的效果如下：


{ path: '/', component: Main }

9f71b5c6890e472c820b3d0418326606.png

 

{ path: '/lists', component: Lists }

f794eb83457c492785dc9c171e5473cd.png


{ path: '/details', component: Details }

 99e69e11e50548ee8174da264b74c0ab.png

 

关注公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；

 

# vue.js # javascript # html # npm
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign