创建vue路由操作项目步骤

1、安装vue脚手架

脚手架官方网站：https://cli.vuejs.org/zh/

npm install vue-cli -g    // 安装低版本的脚手架【不推荐】

npm install @vue/cli -g   // 安装现有版本的脚手架【推荐：对原有的脚手架进行了升级】
                          // 构建项目的效率更高
                          // 项目文件结构更加简单明了

2，安装结束，在文件夹地址栏中打开命令提示符窗口，执行命令查看结果

 C:\Users\DAMU>vue --version
@vue/cli 4.5.15                    # 提示版本信息，说明安装成功

3，执行命令创建vue项目

 $ vue create demo01(注：名字自拟，英文，不要出现中文，会报错)

4，添加项目依赖

 $ npm install vue-router -S（注：安装时注意单词拼写vue-router 千万不要误写成vue-router）

 5、组件分析和创建

创建的项目中包含了布局组件、登录组件以及注册组件；优先实现布局组件登录以及注册之间的跳转

布局组件中又包含了主页组件、商品组件、用户中心组件以及联系我们

 6、路由基本组成

一个完成的路由，接受用户通过导航地址发送请求，然后根据映射关系查询到对应的视图组件，在目标展示位置展示视图组件的过程，这个过程专业术语称为路由过程

 ①导航地址

路由中，导航地址本质上就是超链接，路由组件为了这个导航地址操作比较方便提供了自己的语法

<a href = "#/home">首页</a>      <!-- 普通导航地址 -->

<router-link to = "/home">首页</router-link>    <!-- 路由组件提供的导航语法，本质上就是超链接 -->

②展示位置

路由中，类似动态组件，需要有一个特定的位置提供给视图进行展示，路由中提供了特定语法

<router-view></router-view> 

③映射关系

路由中，需要将用户的请求地址和对应的组件关联起来，项目才能明确的根据用户请求地址查询到对应的组件进行展示，通过路由模块实现

const routes = [

        {path:"/main",component:Layout},

        {path:"/login",component:Login},

         {path:"/reg",component:Register},     

] 

7、启动项目

$ npm run serve