2020-06-20 Vue

★vue-router-动态路由

概念：不同的路由地址，需要指向同一个组件，这样的路由规则的实现，就叫动态路由。
换一句话：你定义的路由规则，需要匹配到不同的地址。

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>

      // 文章列表组件配置对象
      const List = {
        template:`<div>
          <h1>文章列表</h1>
          <router-link to="/article/101">文章1</router-link>  
          <router-link to="/article/102">文章2</router-link>  
          <router-link to="/article/103">文章3</router-link>  
        </div>`
      }
      // 文章详情组件配置对象
      const Article = {
        // $route 是vue实例上的数据对象,和data中数据的使用时一样的
        // $route.params 获取路径传参的（动态路由传参的）这是一个对象
        // $route.params 对象中的数据：键 根据path中的参数名称  值 地址栏上的参数数据了
        template: `<div><h1>文章详情</h1> {{$route.params.articleId}}</div>`
      }

      // 路由规则
      const routes = [
        {path: '/', component: List},
        {path: '/article/:articleId', component: Article}
      ]

      // 初始化
      const router = new VueRouter({ routes })

      const vm = new Vue({
        el: '#app',
        // 挂载
        router
      })
    </script>
  </body>
</html>

总结：

规则 {path: '/article/:articleId', component: Article}
参数 $route.params.articleId

★vue-router-属性to

to属性可以写很多种形式的路径。

例如：

to="/article" 静态的to属性
:to="{path:'/article',query:{id:101}}" === to="/article?id=101"
:to="{name:'article',params:{articleId:101}}" === to="/article/101"
- 路由规则的名称 {name:'article', path: '/article/:articleId', component: Article}

代码演示：

键值对

      // 参数方式：键值对  /article?id=101
      const List = {
        data () {
          return {
            id: 10010
          }
        },
        template: `<div>
          <h1>列表</h1>
          <!--<router-link to="/article?id=101">键值对传参</router-link>--> 
          <!--<router-link :to="'/article?id='+id">键值对传参</router-link>-->
          <router-link :to="{path:'/article',query:{articleId:id}}">键值对传参</router-link>
        </div>`
      }
      const Item = {
        // $route  vue实例下的数据，代表路由信息对象，例如传参信息
        // 获取键值对传参  $route.query
        template: `<div>
          <h1>选项 {{$route.query.articleId}}</h1>
        </div>`
      }

      const router = new VueRouter({
        routes: [
          {path: '/', component: List},
          {path: '/article', component: Item}
        ]
      })

路径上

// 参数方式：路径上  /article/101
       const List = {
        data () {
          return {
            id: 10010
          }
        },
        template: `<div>
          <h1>列表</h1>
          <!--<router-link to="/article/10010">路径上传参</router-link>-->
          <!--<router-link :to="'/article/'+id">路径上传参</router-link>-->
          <router-link :to="{name:'article',params:{id:id}}">路径上传参</router-link>
        </div>`
      }
      const Item = {
        template: `<div>
          <h1>选项 {{$route.params.id}}</h1>
        </div>`
      }

      const router = new VueRouter({
        routes: [
          {path: '/', component: List},
          {name:'article', path: '/article/:id', component: Item}
        ]
      })

总结：

怎么样通过to属性的对象写法，传递键值对参数获取 $route.query
怎么样通过to属性的对象写法，传递路径上参数获取 $route.params

★vue-router-编程式导航

以前：

使用 A 标签进行跳转，如果没有 A 标签使用 location.href = '地址'

现在：

使用 router-link 进行跳转路由，如果没有 router-link 标签使用 $router.push('静态地址'|对象)

概念：

使用js的方式进行路由的跳转，就叫：编程式导航

区别 $route 和 $router 作用：

$route 获取路由信息的（找数据）
$router 获取路由实例的 ( 调方法 )
以上两个对象均可以通过 VUE实例去访问

场景：

异步的登录成功后，需要从登录跳转到首页。
这个时候就可以使用编程式导航，通过js进行跳转。

代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
</head>

<body>
  <div id="app">
    <router-view></router-view>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>

    // 路由实例对象
    const router = new VueRouter({
      // 路由规则
      routes: [
        {
          path: '/login', component: {
            template: `<div>登录页面  <button @click="login()">登录</button></div>`,
            methods: {
              login () {
                // 进行登录
                // 登录成功
                // 跳转首页
                // $router 是在vue实例上的 路由对象，其中有一个函数push函数可以跳转
                this.$router.push('/home')
                // this.$router.push({path:'/home',query:{}})
                // this.$router.push({name:'home',params:{}})
                // push当中的对象形式 和to属性中的对象写法规则一致
              }
            }
          }
        },
        {
          path: '/home', name:'home', component: {
            template: `<div>首页页面  欢迎您！！！</div>`
          }
        }
      ]
    })

    const vm = new Vue({
      el: '#app',
      router
    })
  </script>
</body>

</html>

总结：

如何通过js进行路由跳转 $router.push()

★vue-router-重定向

app.get('/login',(req,res)=>{
  // 返回一个页面
  // res.send('页面')  res.json()
  // 重定向函数  跳转到其他页面
  // res.redirect('/admin')
})

当你访问的是 a 路径的时候，跳转的却是 b 路径。
代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>

      // 路由实例对象
    const router = new VueRouter({
      // 路由规则
      routes: [
        // 重定向
        { path: '/', redirect: '/home'  },
        {
          path: '/home', name:'home', component: {
            template: `<div>首页页面  欢迎您！！！</div>`
          }
        }
      ]
    })

      const vm = new Vue({
        el: '#app',
        router
      })
    </script>
  </body>
</html>

总结：

在vue-router是使用重定向功能 { path: '/', redirect: '/home' },

★vue-router-导航守卫

导航守卫概念：

在路由跳转的时候，可以介入。在跳转的过程中可以做其他的事情。

画图：

image.png

业务需求：

后台管理系统的（所有页面），必须要登录后才能访问。
如果没有登录，直接访问后台的页面，拦截到登录页面即可。
如果已经登录，放行即可。

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>

      const router = new VueRouter({
        routes: [
          {path: '/login', component: { template: '<div>登录页面</div>' }},
          {path: '/', component: { template: '<div>管理系统的首页页面</div>' }},
          {path: '/setting', component: { template: '<div>管理系统的设置页面</div>' }}
        ]
      })

      // 使用导航守卫，监听所有的路由跳转
      router.beforeEach((to,from,next)=>{
        // 这个回调函数在路由跳转的时候会执行
        // 模拟一下当前的登录状态
        const isLogin = false
        // 判断登录的状态
        // console.log(to)
        // to 是跳转的目标路由对象  to.path 目标路径
        // console.log(from)
        // from 是来自的目标路由对象  from.path 来自路径
        // next 是一个下一步执行函数：
        // next() 放行
        // next(路径) 拦截到哪里
        // 如果不是访问登录，且此时没有登录，那么跳转登录页面
        if (to.path!=='/login' && !isLogin) return next('/login')
        // 如果其他情况一律放行
        next()
      })


      const vm = new Vue({
        el: '#app',
        router
      })
    </script>
  </body>
</html>

总结：

可以使用导航守卫实现访问权限的控制。

★vue-router-路由嵌套

概念：

拥有一级路由，也会有有一级路由对应显示的容器（router-view）
拥有二级路由，也会有有二级路由对应显示的容器（router-view）

场景：

image.png

落地代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
</head>

<body>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </nav>
    <div id="page">
      <router-view></router-view>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>
    // 一级路由对应的组件
    const Home = {
      template: `<div>
        <h1>发现音乐界面</h1>
        <router-link to="/tj">推荐</router-link>
        <router-link to="/ph">排行榜</router-link>
        <router-link to="/gd">歌单</router-link>
        <router-view></router-view>
      </div>`}
    const My = { template: '<b>我的音乐界面</b>' }
    const Friend = { template: '<b>朋友界面</b>' }
    // 二级路由对应的组件
    const Tj = { template: '<div>推荐page</div>' }
    const Ph = { template: '<div>排行榜page</div>' }
    const Gd = { template: '<div>歌单page</div>' }

    const routes = [
      {
        path: '/', component: Home, children: [
          { path: '/tj', component: Tj },
          { path: '/ph', component: Ph },
          { path: '/gd', component: Gd }
        ]
      },
      { path: '/my', component: My },
      { path: '/friend', component: Friend }
    ]

    const router = new VueRouter({ routes })

    const vm = new Vue({
      el: '#app',
      router
    })
  </script>
</body>

</html>

总结：

router-view路由标签需要有嵌套关系
路由规则也需要嵌套关系，通过规则对象中的 children 属性，来实现嵌套关系配置。

vue-cli-介绍

脚手架：

脚手架是为了保证各施工过程顺利进行而搭设的工作平台。

vue脚手架：

为了在开发项目的过程中能够顺利的进行而搭建的一个基础的项目结构。
它会为我们创建一套，相对标准的项目目录开发结构。
它还可以为我们在项目开发过程中，提供一些比较便利的开发辅助的工具。
- babel工具把你写的ES6语法降级，兼容更多的浏览器
- less解析（sass less）工具帮你把less解析成csss
- eslint工具约束你的代码风格，统一代码风格，做代码风格检查的。
- ....
- 还集成了webpack工具，包含一个dev-server工具，提供一个预览代码的服务器
  - 自动刷新浏览
  - 热更新功能

总结：

vue-cli在开发阶段给予我们开发时的便利。
让我们专注实现业务，而不是一些项目开发的辅助工作。
文档 https://cli.vuejs.org/zh/guide/