vue路由与脚手架

脚手架

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)（前进）