【Vue】 vue2路由搭建和搭建vue2脚手架（入门级）
1- Vue2路由
00 路由
- 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
- 前端路由：key是路径，value是组件。
01 安装 (以下为安装步骤)
- 切换到根目录，输入
vue create youroute，创建一个youroute的项目
- 选择第三个，按回车
- 通过“空格键”选择， “上下”移动，选择，
Babel (ES6转ES5)，Router（路由工具）、Vuex(全局数据管理)、Linter/Formatter(语法格式检查)
- 进入
Vuex，选择2.x
- 这个
写n ，选择hash 路由
- 选择
默认错误处理
默认，保存
默认，单独文件
写n，不保存预设
- 按回车之后，等待一会儿，当出现 以下命令，即代表 安装成功
02 使用
- 把新建的文件夹导入到
vscode工作区
- 运行
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作用域
- scoped 样式隔离：给组件的每个元素加一个属性
- scoped中的样式只能对当前的组件起作用
- 作用：让样式在局部生效，防止冲突。
4.4 添加一个路由页面步骤 (以 我的 页面 为例)
- 创建一个UserView.vue文件
- 到页面 在App.vue
- 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 运行项目
今天的分享就到这里了，有不明白的可以留言或私信~