脚手架与路由

脚手架

基于node的环境

创建复杂vue项目的模板

安装

1.nodejs安装
2.脚手架全局安装
｜ npm i -g @vue/cli
3.检测是否安装成功
｜ vue -V

创建项目

切换到根目录/项目需要所在的目录
｜ cd /
vue create myvue
｜ 创建一个myvue项目

运行项目

cd myvue
｜ 切换到项目目录
npm run serve
｜ 运行项目

文件释义

Vue路由

内置组件

router-link
｜ 改变地址栏，改变hash值的
router-view
｜ 存放页面

/router/index.js

路由配置
{path: “/”}:配置的地址
{component: “”}:

路由配置

普通

{
​path:“/user”,
​name:“user”,
component:()=>import(xxx)
​}

传参

{
path:“/produce/:id”,
​name:“”,
component:()=>import(xxx)
​}

子路由

{path:“/admin”,
​name:“admin”,
component:()=>import(xxX)
​children:[
{path:“dash”,component:yyy],
​{path:“dash”,component:zzz},
​//重定向
{path:",redirect:‘dash’}]
}

404

1.放置在最后面
​2. palh位为*
​{
path:“*”，
component:NoMatch
​}

$route

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

路由 组件

router-link

切换路由
to属性
改变地址栏的path值
to=“/user”
:to=“/user”
:to=“{name:‘user’,params:(),query():{}}”
:to=“{path:‘/produce/123’}”

router-view

存放路由

编程跳转 （$router）

back()
｜ 返回
forward()
｜ 前进
go() 跳转历史记录
｜ .go(-1)返回一步
｜ .go(1)前进一步
｜
.push(“/”)
｜ 跳转并添加一个历史记录
.replace(‘’/")
｜ 替换
｜ 跳转页面不留历史记录

路由安装

第一步

第二步

第三步

第四步

第五步

第六步

第七步

第八步

文件释义