创建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、组件分析和创建

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

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

创建vue路由操作项目步骤

 6、路由基本组成

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

创建vue路由操作项目步骤

 ①导航地址

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

<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 

上一篇:浅谈vue-cli 3 和 vue-cli 2的区别!!!


下一篇:常用.NET CLI命令