vue 脚手架 路由

脚手架

基于node的环境

    创建复杂vue项目的模板

安装

    01 nodejs安装
    02 脚手架全局安装
npm i -g @vue/cli
    03 检测是否安装成功
vue -V

创建项目

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

运行项目

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

.vue文件

    1. vue组件
2. 复习vue的语法
3. 加载提示组件

什么时候用props

    当数据不需要修改，且需要从父组件获取

什么时候用data

    当数据需要修改的时候
    能用props解决就用props

spa ：

    singlePageApplication
一个网站的所有页面都集成在一个html文件里面
通过切换div模拟页面的切换
    优点
        1. 资源公用
2. 前后端分离
3. 页面切换流畅
    缺点
        1. 对SEO 搜索引擎不友好
    原理：
        地址改变
不刷新页面
监听地址栏变化实现页面局部更新
    Hash路由
        锚点（hash）变化不会刷新页面
        window.onhashchange
    历史记录路由
        H5 新增特性
        history.onpopstate

Vue路由

    内置组件
App.vue
        router-link
改变地址栏，改变hash值的
        router-view
存放页面
    /router/index.js
路由配置
        { path:"/",    //配置的地址
  component:HomeView    //配置的页面组件
}

   路由配置

    普通
        {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. path值为*
{
   path:"*",
   component:NoMatch
}
    路由的别名
        {
   path:"/",
  alias:["/index","/main"]
}

$route 当前路由信息

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

路由组件

    router-link
切换路由
        to属性
改变地址栏
            to="/user"
            :to="'/user'"
            :to="{name:'user',params:{},query:{}}"
            :to="{path:''/produce/123'}"
    router-view
存放路由

router-link to跳转

编程跳转 $router

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