vue 3 创建项目并添加路由（Vue3路由入门教学，图文详解）

注：初学vue，如有错误。请指教，谢谢！
最近在看十次方项目，但是vue版本进行了更新，vue由2版本升级为3版本，有很大的差别。

1.vue-cli

1.1 介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

1.2 下载vue-cli

在命令行下运行

npm install -g @vue/cli
# OR
yarn global add @vue/cli

1.3 构建项目

构建项目时要在命令行中进入自己想要存放项目的位置

vue create vue-router-demo

选择默认模式搭建( default (babel, eslint) )

1.4 运行项目

先进入项目目录，再运行

cd vue-router-demo
npm run serve

运行完毕后

根据显示的路径就能够在浏览器中访问我们的项目了！

2 路由

2.1 创建需要路由的文件

在src/components文件夹中创建自己需要的vue文件，这里我创建的是about.vue和list.vue

在其中随意写一些东西

2.2 创建router.js文件

在src目录下创建router.js文件，并写入一下内容

import Vue from 'vue'
import Router from 'vue-router'
 
//组件模块
import HelloWorld from '@/components/HelloWorld'
import List from '@/components/list'
import About from '@/components/about'

 
Vue.use(Router)
 
export default new Router({
  routes: [
    { path: '/', name: 'HelloWorld', component: HelloWorld },
    { path: '/list', name: 'List', component: List },
    { path: '/about',  name: 'Aabout', component: About},
    
  ]
})

其中的“组件模块”和routes中的内容可以自行修改（根据自己的情况）

2.3 修改main.js

在main.js中添加一下内容

2.4 添加路由

进入App.vue文件，修改添加一下内容

router-link 就是路由，类似html中的a标签，但是不是整个页面跳转，只是将link页面中的内容填写在router-view中。
不要忘记router-view这个标签！！！！！ 还有上面那句话要注释掉！！！！

3 成果

打开项目网站，点击列表即可显示如下图所示效果

错误记录

在进入浏览器中发现报错
错误：Can’t resolve ‘vue-router’ in xxxxx
是差vue-router包，在命令行中运行一下命令即可解决

npm install vue-router

记得给博主点赞哦！纯手打

相关文章

vue动态路由：动态路由教学
vue嵌套路由：嵌套路由教学