【Vue】0 - vue-cli安装、vue路由

1、vue-cli 安装

win+R 输入cmd 进入命令行
命令行清屏 ds
进入e盘 e:

1、安装 node , node -v 查看安装版本

2、安装 淘宝镜像 ，cnpm -v 查看安装版本

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装 webpack , webpack -v 查看安装版本

全局安装 webpack:

npm install --global webpack

不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack版本的项目中，可能会导致构建失败。

  cnpm install webpack -g

// 安装vue-cli脚手架 ,vue-cli -V 查看安装版本
npm install vue-cli -g

// 创建项目
vue init webpack myProject（项目工程名）    //会有一些初始化设置

// 安装项目依赖
cd myProject
npm install   //下载package.json中的软件包，需进入package.json的文件中中

// 安装 vue路由模块 vue-router  和网络请求模块 vue-resource
cnpm install vue-router  vue-resource --save    //--save   将安装的模块保存到package.json的文件中中

// 启动项目  运行开发者模式（dev)
npm run dev

2、vue-cli中配置Sass

// 安装依赖的node模块
npm  install node-sass --save-dev
npm install node-loader --save-dev
// -g 的意思是将模块安装到全局;   -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖;
// -save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖

// 在webpack.base.config.js的rules:中加上
{
  test:/\.scss$/,
  loaderL["style","css","sass"]
}

// 在用sass的地方
<style lang="scss" type="text/css"></style>

3、路由 vue-router

参考：https://www.cnblogs.com/SamWeb/p/6610733.html

• 路由-指向的意思，一种映射（即页面上home按钮对应home内容，about按钮指向about内容），
  所以页面上有两个部分：按钮部分 和 对应显示的部分；

在js中配置路由 设置（按钮和内容的）对应关系；

路由中有3个概念：route 、routes 、 router

• route - 一条路由，例如：home按钮->home内容，是一个路由route；
• routes - 一组路由，把页面里的每条路由组合起来，形成一个数组。例如：[{home按钮=>home内容},{about按钮=>about内容}]
• router - 一种机制，类似一个管理者，来管理路由；routes 只是定义了一组路由，是静止的，当点击的时候，通过router 去查找对应的内容并显示

客户端中的路由，实际是dom元素的显示和隐藏；客户端的路由有2中实现方式：基于hash 或 基于 H5 history api

1、页面实现（html文件中）

<router-link to='/home'>Home</router-link>    //对应点击按钮部分,属性to 表示点击后，指向的路径
<router-view></router-view>          //对应显示部分

2、js中配置路由

// 路由组routes 由 路由route组成的数组，一条路由route是一个对象,由两部分组成：路径path 和 组件component ；
// 例如{path:'/home',component:home}


export default{
  // 在router-> index.js首先定义路由组routes：
  const routes = [
    {path:'/home',component:Home},
    {path:'/about',component:About}
  ]

 // 在router-> index.js 中创建router 对路由routes进行管理,router 由构造函数 new vueRouter()创建，接收routes参数；
  const router = new vueRouter({
    routes,   //routes:routes, 的缩写
  })

  // 配置完成后，在main.js中把router 实例 注入到vue根实例中，就可以使用路由了
  const app = new Vue({
    el:'#app',
    router,
  })
}

// 执行过程：用户点击<router-link to='/pathurl'></router-link>的时候，根据to属性 指向的路径  在路由组中查找对应的组件component，
// 然后把组件渲染到<router-view></router-view>所在的地方，   这些都是基于hash实现的；

// 确保：安装了vue-router   cnpm install vue-router --save
        // 定义组件home.vue  和 about.vue
        // 在app.vue中定义router-link 和 router-view
        // 在src下创建新文件router.js 定义router，就是定义 路径 到 组件 的映射


        // 在router.js文件中：引入vue 和vue-router
        // import Vue from "vue";
        // import VueRouter from "vue-router";

        // 引入组件
        // import home form './home.vue'
        // import about from './about.vue'

        // 告诉vue 使用VueRouter
        // Vue.use(vueRouter)

        // 定义路由组
        // comst routes=[
        //   {path:'/home',component:home},
        //   {path:'/about',component:about}
        // ]

        // 实例化一个路由router
        // const router = new vueRouter({
        //   routes,
        // })
        // export default router

        // 把路由router注入到根实例中，在main.js中引入路由
        // import Vue from 'vue'
        // import App from './app.vue'
        //
        // import router from 'router.js'
        //
        // new Vue({
        //   el:'#app',
        //   router,
        //   render:h=>h(app)
        // })

3、重定向

// 3、第一次进入页面时，路径是'/',需要给这个路径相应的配置，给这个路径'/'指向一个组件，例如组件home,
// 但是如果我们写[{path:'/',component:home},{path:'/home',component:home}]会报错，两条路径不能指向同一个组件，

// 所以我们需要《重定向》，重定向就是重新指定一个方向，例如：页面本来访问'/'，我们重新指向路径'/home',相应的就会显示home组件
// vueRouter 用redirect 来定义重定向路径
exort default{
  const routes = [
    {path:'/',redirect:'/home'},    //重定向路径 redirect,首页时显示home路径 对应的组件
    {path:'/home',component:home},
    {path:'/about',component:about}
  ]
}

4、路由的实现

// 打开浏览器的控制台，可以看到 router-link 渲染成了a标签，to属性 渲染成了a标签的href属性
// router-view渲染成了我们定义的组件，它其实是一个占位符，他在哪，匹配路径的组件就显示在什么地方

// router-link处于选中状态时，vueRouter会自动给渲染的a标签添加一个样式类名 .router-link-active,所以尅呀修改这个类的样式来修改选中样式
// .router-link-active{color:red;}无效，需要在类名前加上a  才可以 ；未选中的router-link 要改变其样式，可以直接给他一个类名；
 a.router-link-active{color:red;}

5、动态路由

// 假如需要在路径中一个动态的部分，比如路径'/user' 有不同的id，在vue-router中动态的部分 以:开头，
// 比如{path:'/user/:id',component:user}  如下，在app.vue文件中
<template>
 <router-link to='/home'>home</router-link>
 <router-link to='/about'>about</router-link>

 <router-link to='/user/123'>用户123</router-link>
 <router-link to='/user/456'>用户456</router-link>

 <router-view></router-view>
</template>

// 在router.json的文件中
export default{
 const router = new vueRouter({
   routes:[
     {path:'/',redirect:'/home'},     //redirect重定向路径
     {path:'/home',component:home},
     {path:'/about',coomponent:about},
     {path:'/user/:id',component:user}    //动态路由，路径中的动态部分以:开始  ，配置了动态id
   ]
 })
}

// 定义user.vue组件
// 当vue-router注入到根实例中后，在组件的内部可以通过 this.$route 来获取router实例，
// this.$route有一个params属性，可以获取动态路由中的动态部分，
// params是一个对象，属性名是路径中定义的  动态部分，如path:'/user/:id' 中的动态部分id；
// 属性值是router-link中to属性中的动态部分,如 to='/user/123'中的动态部分 123；

// 使用computed属性 获得动态路由中的动态部分，如：
<template>
 <div>你好 {{ userName}}, 欢迎登录</div>
</template>

<script>
export default{
 name:'user',
 data(){
   return{

   }
 },
 computed:{    //计算属性，
   userName(){
     return this.$route.params.id       //获取动态路由中的动态属性id的值
   }
 }
}
</script>

// 由于动态路由在来回切换时，都是指向同一个组件，但vue不会销毁再创建这个组件，而是一直《复用》这个组件，因为在一个生命周期里
// 所以切换动态路由的时候无效，

// 所以我们只好在app.vue中 利用watch 来监听$route的变化，所以用监听来实现
<template>
 <div>你好 {{ userName}}, 欢迎登录</div>
</template>

<script>
 export default{
   name:'user',
   data(){
     return{
       userName:''
     }
   },
   watch:{
     $route(to,from){  //to 表示你要去的那个组件，from表示你从哪个组件过来的，他们也是两个对象，也有params属性
       this.userName = to.params.id;
     }
   }
 }
</script>

6、嵌套路由

// vue 提供childrens 属性，用于配置子路由。他也是一组路由，相当于routes
// 子路由在html部分不变，定义router-link标签用于导航，定义router-view用于渲染对应的组件

<router-link to='/home/apple'>apple</router-link>   //to属性注意，路由进入的时候现进入home页 在进入子路由apple
<router-link to='/home/banana'>banana</router-link>

<router-view></router-view>

// router.js 中配置修改如下：
export default{
  new VueRouter({    //实例化一个router
    routes:[
      {path:'/',redirect:'/home'},
      {path:'/home',
       component:home,
       childrens:[
        {path:'',component:apple}, //当进入home页时，子路由默认显示的组件
        {path:'/apple',compontent:apple},
        {path:'/banana',component:banana}
      ]},
      {path:'/about',component:about},
      {path:'/user/:id',component:user}
    ]
  })
}

7、命名路由

// 就是给路由一个名字，加了一个name属性，例如
{
  path:'/user/:id',
  name:'user',
  component:user
}
// 有了命名路由，router-link中的to属性就可以使用对象了,当使用对象的时候，to前面加: 表示绑定
<router-link to='/user/123'>用户123</router-link>
<router-link :to='{name:'user',params:{id:123}}'>用户123</router-link>

8、编程式导航

// 编程式导航，主要用在按钮点击上，当点击的时候 跳转到另一个组件，调用this.$router.push()的方法
// 当把router注入到根实例中后，通过，this.$router获得router
// 在方法中跳转界面并传参，在router文件下的index.js中定义路由
{
 path:'/detail',
 name:'detail',     //命名路由，给路由起的名字，有了name 才可以给router-link的to属性使用对象
 component:detail
}

// query传参
this.$router.push({
  path:'/detail',
  query:{
    id:123,
    type:'ab'
  }
})
this.$route.query.id   //接收参数
// 地址显示   http://expert.test.sipopsp.com/#/user/usercenter/appointDetail?orderId=27ca6deb-d244-4611-8fdd-b48948caf3b6&state=1&type=4

// params传参
this.$router.push({
  name:'detail',
  params:{
    id:123,
    type:'ab'
  }
})
this.$route.params.id   //接收参数
// 地址显示   http://expert.test.sipopsp.com/#/user/usercenter/appointDetail


// vue路由传参params 与 query 两种方式的区别
// 参考：https://www.cnblogs.com/lulianlian/p/7682790.html
// 用法上的区别：query要用path来引入，params要用name 来引用，接收参数的时候类似，
// 分别是this.$route.query.id   和  this.$route.params.id
// 展示上的区别：query类似于ajax中的get传参，会在浏览器地址栏中显示参数，而params类似post ，不会再地址栏中显示参数；

4、组件之间的通信

// 参考 https://segmentfault.com/a/1190000010530600
// 根据组件之间的关系：父->子 、 子->父 、非父子有所不同