脚手架安装以及路由的简单使用

脚手架安装

1、nodejs安装
2、脚手架全局安装

npm i -g @vue/cli

3、检测是否安装成功

vue -V

注：运行项目需要在当前创建文件夹 运行

npm run serve

路由

spa

优点

1、资源公用
2、前后端分离
3、页面切换流畅

缺点

对SEO搜索引擎不太友好

原理

地址改变、不刷新页面、监听地址栏变化实现页面局部更新

Vue路由

内置组件

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

路由配置

普通
{
    ​path:"/user",
    name:"user",
    component:()=>import(xxx)
}

传参
{
    path:"/produce/:id",
    name:"",
    component:()=>import(xxx)
}

子路由
{
   path:"/user",
   name:"user",
   component:()=>import(xxx)，
   children:[
      {path:"dash",component:yyy},
      {path:"event",component:zzz},
     {path:"",  redirect:'dash'}
​]
​}

404页面
1、配置在最后面
2、path值为*
{
    path:"*",
    ​component:NoMatch
​}

路由的别名
{
    path:"/",
    alias:[  "/index","/main"  ]
​}

$route

路由组件

router-link       切换路由
router-view      存放路由

$router 编程跳转

.push("/")跳转并添加一个历史记录
.replace("/")跳转替换（不留当前历史记录）
.back()返回   .forward()前进
.go(-1) 返回一步
.go(1)前进一步

 当前路由信息（$route）

• name名称
• params：路由的参数
• path：地址信息
• fullPath：全地址信息
• hash：哈希值
• query：查询参数
• meta：元信息