Vue学习（十三）——路由

1安装vue-router（如果在设置项目的时候已经选择了，就不用了）

使用指令npm install vue-router --save

2.在模块化工程中使用

（1）导入路由对象，并且调用Vue.use(VueRouter)

（2）创建路由实例，并且传入路由映射配置

（3）在Vue实例中挂在创建的路由实例

index.js文件

//配置路由相关信息
import VueRouter from 'vue-router'
//导入Vue对象
import Vue from 'vue'

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


//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)
//2.创建VueRouter对象
//每一个映射关系就是一个对象
const routes=[
    {
        path:'/',
        redirect:'/home'
    },
    {
        path:'/home',
        component:Home,
        meta:{
            title:'首页'
        },
        children:[
            {
                path:'',
                redirect:'news'
            },
            {
                path:'news',//这里前面不能加斜杠
                component:HomeNews
            },
            {
                path:"msg",
                component:HomeMsg
            }
        ]
    },
    {
        path:'/about' ,
        component:About,
        meta:{
            title:'关于'
        },
        beforeEnter:(to,from,next)=>{
            alert("我进入了关于页面")
            next()
        }
    },
    {
        path:'/user/:name',
        component:User,
        meta:{
            title:'用户'
        }
    },
    {
        path:"/profile",
        component:Profile,
        meta:{
            title:'档案'
        }
    }
]

const router=new VueRouter({
    //配置路由和组件之间的应用关系
    routes,
    mode:'history',
    linkActiveClass:'active'
})


router.beforeEach((to,from,next)=>{
    document.title=to.matched[0].meta.title
    next()
})

//3.将router对象传入到Vue实例
//这里我们的处理办法是将router对象导出，然后在另一个文件中接收
export default router

main.js

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


Vue.config.productionTip = false

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

部分组件的文件

APP.vue

<template>
  <div id="app">
    <keep-alive><router-view></router-view></keep-alive>
    <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about" tag="button">关于</router-link>
    <router-link :to="'/user/'+name" tag="button">用户</router-link>
    <router-link :to="{path:'/profile',query:{
      name:'tbw',
      height:188,
      loving:'basketball'
    }
    }" tag="button">档案</router-link>
    <!--
    <button @click="homeclick">首页</button>
    <button @click="aboutclick">关于</button>
    -->
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      name:'Tubowen'
    }
  },
  methods:{
  }
}
</script>

<style>
.router-link-active{
  color: blueviolet;
}
</style>

User.vue

<template>
  <div>
      <h2>用户界面</h2>
      <h2>{{userid}}</h2>
  </div>
</template>

<script>

export default {
  name: 'User',
  computed:{
      userid(){
          return this.$route.params.name
      }
  },
  /*created(){
    document.title='用户'
  }*/
}
</script>

<style>
</style>

3.使用vue-router的步骤

（1）创建路由组件

（2）配置路由映射

（3）使用路由：通过标签<router-link><router-view>

<router-view>是指定路由显示的位置，相当于一个占位符

<router-link>是处理用户选择的一个标签，to属性指定的是Vue对象中接收的路由，tag属性是指定的该标签显示的形式，默认是a标签。如果为标签添加一个replace属性，那么就不能使用浏览器的前进后退来控制页面了。

可以为标签设置一个选择后的样式，样式名为router-link-active.也可以使用active-class属性，值为active或者是为vueRouter添加一个linkActiveClass属性，属性值设置为active。然后再从新编写active样式。

4.路由的默认路径

由于我们在刚刚一开始进入网页的时候，没有对网页进行点击，那么路由就不知道我们需要显示什么，所以，我们可以为路由选取一个默认的路径，使用以下方法多配置一个映射就可以设置默认的路由了。该映射path:'/',redirect是重定向，放入默认路由的路径。

5.把默认的hash模式改为history模式

6.通过代码的方法来修改路由

可以通过this.$router对象来操作路由

7.动态路由

在某些情况下，一个页面的path的路径可能是不确定的，可能最后一个路径是不固定的，需要使用一个变量来存储，这样就需要我们的动态路由了

router-link的to属性可以动态绑定属性值，name变量可以被修改来达到修改组件显示的效果

可以使用一个name变量来存储需要的路径

组件的路径也可以使用动态的绑定变量来写出来，不过我不是很明白为什么组件之间的变量可以直接使用，有大佬可以解释一下

8.打包文件的解析（不是很明白）

9.路由的懒加载

当打包加载构建应用的时候，JS包会变得非常大，影响页面加载，如果我们能把不同的路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。路由的懒加载主要作用是将路由对应的组件打包成一个个的js代码块，只有在这个路由被访问到的时候再去加载对应的组件，这样就可以更快了。

懒加载的三种方式：

（1）结合Vue的异步组件和Webpack的代码分析（不推荐）

const Home = resolve=>{
require.ensure(['../components/Home.vue'],()=>{
resolve(require('../components/Home.vue'))})
};

（2）AMD写法

const About=resolve=>require(['../components/About.vue'],resolve);

（3）在ES6中，我们可以有更加简单的写法来组织Vue异步组件和webpack的代码分割（推荐）

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

下面是修改的代码

10.路由的嵌套

再另外写两个组件，作为Home组件的子组件，放在Home组件的children属性中。

再在home组件中调用。

11.路由传递参数

传递参数主要有两种类型：params和query

（1）params类型

配置路由格式：/router/:id

传递的方式：在path后面跟上对应的值

传递后形成的路径：/router/123,/router/abc

（2）query类型

配置路由格式：/router

传递方式：对象中使用query的key作为传递方式

传递后形成的路径：/router?id=123,/router?id=abc

12.$route和$router的区别

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

$route为当前router跳转对象里面可以获取name、path、query、params等

13.路由的导航守卫

如果我们的需求是每点击一个页面就使得页面拥有对应的标题，那么可以调用组件的生命周期函数created来修改页面标题，但是这样操作会很麻烦，为了实现一个效果跨了多个文件

用户组件

档案组件

类似以上这样的操作，这里我们使用导航守卫就会十分方便

什么是导航守卫？

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

我们可以使用beforeEah来完成标题的修改，首先我们可以在钩子当中定义一些标题，可以利用meta来定义，其次利用导航守卫修改我们的标题。

导航钩子的三个参数解析：

to：即将要进入的目标路由对象

from：当前导航即将要离开的路由对象

next：调用该方法后，才能进入下一个钩子

前置钩子beforeEach，后置钩子afterEach。

补充：如果是后置钩子，也就是afterEach，那么就不需要主动调用next()函数。我们之前使用的导航守卫叫做全局守卫，还有路由独享的守卫，组件内的守卫。

路由独享首守卫

14.路由与keep-alive

keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，或者避免重新渲染（以下两个属性值不要随便的加空格  ）

include属性：字符串或者正则表达，只有匹配的组件会被缓存

exclude属性：字符串或者正则表达式，任何匹配的组件都不会被缓存

router-view也是一个组件，如果直接被包含在keep-alive里面，所有路径匹配到的视图组件都会被缓存。

keep-alive标签可以使组件不被加载，将组件缓存，组件隐藏的时候就不会被销毁了，下次再调用的时候就不用重新加载了。

在对应组件中进行相应的生命周期函数操作，这样就可以完成对应组件状态的缓存了，而且有些生命周期函数的执行必须使得组件在keep-view标签中才能实现。

切换组件

切换回去，还是‘消息子组件’