【Vue】 vue2路由搭建和搭建vue2脚手架（入门级）

1- Vue2路由

---

00 路由

---

1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
2. 前端路由：key是路径，value是组件。

---

01 安装 (以下为安装步骤)

1. 切换到根目录，输入vue create youroute ，创建一个youroute的项目

2. 选择第三个，按回车

3. 通过“空格键”选择， “上下”移动，选择， Babel (ES6转ES5)，Router（路由工具）、Vuex(全局数据管理)、Linter/Formatter(语法格式检查)

4. 进入Vuex ，选择2.x

5. 这个 写n ，选择hash 路由

6. 选择默认错误处理

7. 默认，保存

8. 默认，单独文件

9. 写n，不保存预设

10. 按回车之后，等待一会儿，当出现 以下命令，即代表 安装成功

02 使用

1. 把新建的文件夹导入到 vscode 工作区

2. 运行cd youroute 和 npm run serve ，出现以下命令，把地址复制到浏览器，显示页面，即代表成功

03 案例效果展示(超简陋版)

3.1 首页

3.2 关于

3.3 我的

3.4 产品

3.5 后台管理

04 知识点分析

4.1 目录如下图所示：

4.2 $route 当前路由信息

• name名称
• params 路由参数
• path 路径
• fullPath 全路径
• query 查询参数
• hash 哈希
• meta 元信息

4.3 scoped作用域

1. scoped 样式隔离：给组件的每个元素加一个属性
2. scoped中的样式只能对当前的组件起作用
3. 作用：让样式在局部生效，防止冲突。

4.4 添加一个路由页面步骤 (以 我的 页面 为例)

1. 创建一个UserView.vue文件
   
2. 到页面 在App.vue
   
3. router/index.js 配置路由
   

4.5 路由组件

router-link 改变地址栏，改变hash值
to 属性

to="/user"

:to="/user"

:to="{name:'user',params:{},query:{}}"

:to="{path:'/produce/123'}"

4.6 编程跳转(整个路由对象$router)

• back() 返回
• forward() 前进
• go() 跳转历史记录
  • go(-1) 返回
  • go(1) 前进
• push() 跳转页面
  • 会留历史记录
• replace() 跳转替换页面
  • 不会留历史记录

4.7 路由配置

1. 普通路由

2. 传参路由

3. 子路由（嵌套路由）

4. 404 配置
配置在最后，path值为*
5. 路由别名

05 产品页面分析

5.1 定义参数

{path:'/produce/:id'}

5.2 App.vue 传递参数

<router-link to="/produce/skirt">产品 连衣裙</router-link> 
<router-link to="/produce/veg">产品 蔬菜</router-link> 

5.3 ProduceView.vue 接收参数

{{ $route.params.id }}

5.4 关系图

06 管理页面

6.1 在views 里新建 admin 文件夹，在里面建 子页面

6.2 AdminVue.vue 里面的代码

<template>
    <div>
        <div class="aside">
            <h3><router-link to="/">首 页</router-link> | 菜单</h3>
            <hr />
            <p><router-link to="/admin/dash">概览页面</router-link></p>
            <p><router-link to="/admin/event">事件页面</router-link></p>
        </div>
        <div class="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style scoped>
.aside {
    width: 150px;
    height: 100vh;
    background-color: rgb(231, 225, 225);
    padding: 10px;
    float: left;
}


</style>

6.3 路由配置

{
        path: "/admin",
        name: "admin",
        component: () => import("../views/admin/AdminView.vue"),
        children: [
            {
                path: "dash",
                name: "dash",
                component: () => import("../views/admin/DashView.vue"),
            },
            {
                path: "event",
                name: "event",
                component: () => import("../views/admin/EventView.vue"),
            },
            {
                path: "",
                redirect: "dash",
            },
        ],
    },

2- Vue2 脚手架

---

01 脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

02 安装与运行

2.1 脚手架全局安装

2.2 检测是否安装成功

2.3 创建项目

切换到根目录，创建myvue文件夹

进入文件夹，运行如下命令：

2.4 运行项目

---

今天的分享就到这里了，有不明白的可以留言或私信~