脚手架
vue脚手架是基于node.js环境,创建复杂vue项目的模板
安装
脚手架全局安装
npm i -g @vue/cli
检测是否安装成功
vue -V
// 安装成功会出现版本号
创建运行项目
vue create myvue
// 创建一个myvue项目
cd myvue
// 切换到项目目录
npm run serve
// 运行项目
vue路由
vue路由小概
spa(singlePageApplication)
一个网站的所有页面都集中在一个htnl文件里通过切换div模拟页面切换
1.优点
资源公用、页面切换流畅、前后端分离
2.缺点
对SEO不友好
3.原理
地址栏信息改变不刷新页面、监听地址栏变化实现页面的局部更新
4.Hash路由
锚点变化不会刷新页面,通过windo.onhashchange事件
5.历史记录路由
H5新增特性,history.onpopstate
创建路由
1.先根据上述安装脚手架
2.vue create myrouter 创建路由
选择第三个选项回车
3.上下箭头控制上下空格控制选中,选中星号所在位置
4.
在这里可以选择2.x版本
5.后续选择默认即可
6.
cd myvue
// 切换到项目目录
npm run serve
// 运行项目
路由简易内容
1.内置组件(App.vue)
router-link 改变地址栏,改变hash值
router-views 存放页面
2.路由配置(router/index.js)
{
pash:“/”,
name:“home”,
component:()import(‘…/views/HomeView.vue’)
} (普通配置)
{
pash:“/:id”,
name:“home”,
component:()import(‘…/views/HomeView.vue’)
} (传参配置)
3.当前路由信息($route)
name 名称
params 路由参数
path 路径
fullPath 全路径
query 查询参数
hash 哈希
meta 元信息
4.跳转
router-link to 跳转
$router 编程跳转
.push(‘/’) (跳转并添加历史记录)
.replace(‘/’) (跳转不留历史记录)
.back() (返回)
.forword()(前进)
.go(-1)(返回)
.go(1)(前进)