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 运行项目
今天的分享就到这里了,有不明白的可以留言或私信~