路由 vue-router 和 Promise

三十、路由

1、前后端路由概念

2、改变url而不跳转页面的方法

2.1、url的hash

2.2、history.pushState()

可以返回上一页

2.3、history.replaceState()

不可以返回上一页

2.4、history.go()

3、安装vue-router

npm install vue-router --save

4、配置vue-router

创建router文件夹，在router文件夹新建index.js文件

5、创建router实例

main.js中导入

import Vue from 'vue'
import App from './App'
import router from './router'

//关闭生产模式下给出的提示
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

6、项目代码详解

路由默认值修改为history（不改默认是hash）

代码

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

import Home from '../components/Home'
import About from '../components/About'

// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
const routes = [
  {
    path: '',
    // redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

// 3.将router对象传入到Vue实例
export default router

7、使用路由

7.1、router-link 标签

该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签

7.2、router-view 标签

该标签会根据当前的路径, 动态渲染出不同的组件
在路由切换时, 切换的是<router-view>挂载的组件, 其他内容不会发生改变

7.3、代码

<template>
  <div id="app">
    <h2>我是APP组件</h2>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
  }
}
</script>

<style>
</style>

7.4、router-link 其他属性的补充

7.4.1、tag

tag可以指定<router-link>之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是<a>

7.4.2、replace

replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中

7.4.3、active-class

当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称

7.4.4、代码示例

<template>
  <div id="app">
    <h2>我是APP组件</h2>
    <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
  }
}
</script>

<style>
  /* 原来 */
  /*.router-link-active {*/
    /*color: #f00;*/
  /*}*/
  /* 修改后 */
  .active {
    color: #f00;
  }
</style>

7.4.5、linkActiveClass

每一个标签都要修改active-class，会非常繁琐，通过在创建router实例时添加属性linkActiveClass，统一类名active，以后只要哪个标签处于活跃时，就会使用active这个class

const router = new VueRouter({
  routes,
  mode: 'history',
  // 统一活跃时调用的class名
  linkActiveClass: 'active'
})

7.5、通过代码跳转路由

this.$router.push =>history.pushState() 可返回

返回： this.$router.back()

this.$router.replace =>history.replaceState() 不可返回

代码示例

<template>
  <div id="app">
    <h2>我是APP组件</h2>
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    homeClick() {
      // 通过代码的方式修改路由 vue-router
      // push => pushState
      // this.$router.push('/home')
      this.$router.replace('/home')
      console.log('homeClick');
    },
    aboutClick() {
      // this.$router.push('/about')
      this.$router.replace('/about')
      console.log('aboutClick');
    }
  }
}
</script>

<style>
  /*.router-link-active {*/
    /*color: #f00;*/
  /*}*/
  .active {
    color: #f00;
  }
</style>

8、动态路由

不同用户根据不同id进入不同路径

路由实例的配置

{
  path: '/user/:id',
  component: User,
  meta: {
    title: '用户'
  },
}

router-link标签跳转，如果id为动态参数，需要把绑定 to 属性

<router-link v-bind:to="'/user/'+userId">用户</router-link>

获取url拿到的id $route.params.id (注意：不是$router，区别详情看第11.5节)

组件

<h2>{{$route.params.id}}</h2>

9、路由的懒加载

9.1、什么是路由懒加载

路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.
只有在这个路由被访问到的时候, 才加载对应的组件

9.2、路由懒加载的效果

左为引用前，右为引用后

9.3、路由懒加载的方式

const Home = () => import('../components/Home')

10、路由的嵌套使用

10.1、认识嵌套路由

10.2、嵌套路由的实现

11、vue-router 参数传递

11.1、参数传递的类型

11.2、query类型参数传递的方式一 router-link

<router-link 
:to="{
  path: '/profile', 
  query: {name: 'why', age: 18, height: 1.88}}">
档案</router-link>

11.3、query类型参数传递的方式二 JavaScript

<template>
  <div id="app">
    <h2>我是APP组件</h2>
    <button @click="profileClick">档案</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    
  },
  methods: {
    profileClick() {
      this.$router.push({
        path: '/profile',
        query: {
          name: 'kobe',
          age: 19,
          height: 1.87
        }
      })
    }
  }
}
</script>

11.4、获取参数

11.5、$route 和 $router 的区别

12、导航守卫

12.1、什么是导航守卫

vue-router提供的导航守卫主要用来监听监听路由的进入和离开的
vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发.

12.1、router.beforeEach()

beforeEnter: (to, from, next) => {
  next()
}

导航钩子的三个参数解析:
to: 即将要进入的目标的路由对象.
from: 当前导航即将要离开的路由对象.
next: 调用该方法后, 才能进入下一个钩子

实现不同页面不同title的需求

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')

// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
const routes = [
  {
    path: '',
    // redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首页'
    },
    children: [
      // {
      //   path: '',
      //   redirect: 'news'
      // },
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: '关于'
    }
  },
  {
    path: '/user/:id',
    component: User,
    meta: {
      title: '用户'
    },
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '档案'
    },
  }
]
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

router.beforeEach((to, from, next) => {
  // 从from跳转到to
  document.title = to.matched[0].meta.title
  // console.log(to);
  next()
})
// 3.将router对象传入到Vue实例
export default router

12.3、导航守卫补充

补充一:如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数.
补充二: 上面我们使用的导航守卫, 被称之为全局守卫.
此外还有 路由独享的守卫. 和 组件内的守卫.

更多内容, 可以查看官网进行学习:
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB

13、keep-alive 保留页面组件存活状态

14、路由组件切换时，解决滚动状态会跟随的问题

在路由配置router.js中添加方法

const router = new VueRouter({
	routes,
	mode: "history",
	// 路由切换时，更新显示坐标
	scrollBehavior(to, from, savedPosition) {
		return { x: 0, y: 0 };
	},
});

三十一、Promise

1、详解

2、Promise的三种状态

3、Promise.all