Vue-CLI2前端路由的使用汇总

1. 安转vue-router

这里使用--save 而不是--save-dev的原因是在生成时也需要用到

npm install vue-router --save 

2. 使用vue-cli 2 创建一个项目（可以安装router也可以不安装）

如果在创建项目时安装了router，创建好的项目在src目录下会多出来一个router目录，可以在该目录下的index.js中对具有进行设置

3. 使用vue-router

import Vue from "vue"
import VueRouter from "vue-router"
import home from '../components/Home'
import about from '../components/About'
Vue.use(VueRouter)     //第一步，安装路由插件
const routes=[    //配置具有关系
  {
    path:"/home",
    component: home,
  },
  {
    path:"/about",
    component: about
  }
]
const router = new VueRouter({    //第二步，生成一个router对象，并进行配置路由映射关系
  routes,    //配置具有关系
  mode:"history",    //指定路由器是使用history模式还是hash模式
  linkActiveClass:"active",
})
export default router    //第三步，导出（挂载）

<template>
  <div id="app">
    <router-link to="/home" tag="button" replace>主页</router-link>
    <router-link to="/about" tag="button">关于</router-link>
    
    <!-- 路由的代码跳转方式 -->
    <button v-on:click="homeClick">home</button>  
    <button @click="abtClick">about</button>    
    <!-- 路由的代码跳转方式 -->
    
    <!-- 占位的作用 -->
    <router-view></router-view>   
<!--    <router-view/>-->
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    homeClick(){      //代码跳转的实现
      this.$router.push("/home")  //还可以使用replace
    },
    abtClick(){     //代码跳转的实现
      this.$router.push("/about")
    }
  }
}

</script>

4. 动态路由

可以实现一下两点效果:

1. 动态的路由路径
2. 向后面的组件传递简单参数

动态路由的实现方式：

1. 在配置路由时以特殊的方式指定路径

const routes=[
  {
    path:"/",
    redirect: "/home"
  },
  {
    path:"/home",
    component: home,
  },
  {
    path:"/about",
    component: about
  },
  {
    path: '/user/:userId/:number',     //以特定的方式指定路径
    component: User,
  }
]

2. 动态传入路径并且使用参数

<template>
  <div id="app">
  	<!-- userName 和 num 为后端传递过来的数据，动态拼接到路径中-->
    <router-link :to="'/user/'+userName+'/'+num" tag="button">用户</router-link>
    <router-view></router-view>
    <!-- 通过$route.params.userId的方式使用数据-->
    <h1>{{$route.params.userId}}--{{$route.params.number}}</h1>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return {
      userName:"李四",
      num:"2"
    }
  }
}

</script>

5. 路由懒加载的使用

为什么要使用懒加载？

在使用vue-cli2进行打包时，会生成三个js文件，分别为业务逻辑代码的js，第三方插件的js，以及底层逻辑的js。这里我们知道一个项目会包含很多的js文件，如果全部都打包到一个文件中，用户在请求该JS文件时，由于文件太大可能会导致浏览器出现短暂的空白阶段，路由懒加载正是为了解决这个问题。我们只需要给用户返回当前url请求对应的js文件即可，而不必将所有的js文件都给用户返回。

实现路由懒加载的两种方式：

const home=()=>import ('../components/Home')      //方式1
const about=()=>import('../components/About')
const routes=[
  {
    path:"/",
    redirect: "/home"
  },
  {
    path:"/home",
    component: home,
  },
  {
    path:"/about",
    component: about
  },
  {
    path: '/user/:userId/:number',
    component: ()=>import("../components/User"),    //方式2
  }
]

6. 路由的嵌套

第一步，配置嵌套路由。 第二步，准备相应的组件，并且懒加载导入

const routes=[
  {
    path:"/home",
    component: home,
    children:[    //使用children关键词
      {
        path:'news',     //第一步，定义子路径，注意没有斜杠/
        component: ()=>import('../components/home/homeCpnt/News'), // 第二步，准备相应的组件，并且懒加载导入
      },
      {
        path: 'msg',
        component: ()=>import('../components/home/homeCpnt/Message')
      }
    ]
  },
  

第三步，在对应的父组件中使用router-link和router-view标签

<template>
  <div>
    <h1>这里是home</h1>
    <h2>这里是home的内容</h2>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/msg">消息</router-link>
    <router-view></router-view>
  </div>

</template>

7. 路由的参数传递

两种方式来传递参数：

1. params
   参考动态路由部分
2. query
   
   步骤一，配置路由（普通配置方式）

const routes=[
  {
    path: '/profile',
    component: ()=>import('../components/profile/Profile')
  }
]

步骤二，在主页面，也就是主APP中动态绑定to属性

<template>
  <div id="app">
    <router-link :to="{path:'/profile',query:{name:'chenchen',age:'18'}}" tag="button">档案</router-link>
    <router-view></router-view>

  </div>
</template>

步骤三，在子组件中使用传递的数据

<template>
  <div>
    <h1>这里是profile</h1>
    <h2>这里是profile的内容</h2>
    <h2>{{$route.query.name}}</h2>
    <h2>{{$route.query.age}}</h2>
  </div>
</template>

8. 全局导航守卫

什么是导航守卫？
有时候我们希望在跳转的过程中来处理一些事情。导航守卫通常用来监听跳转过程，跟vue的生命周期函数有异曲同工之妙。

const routes=[
  {
    path:"/",
    redirect: "/home"
  },
  {
    path:"/home",
    component: home,
    children:[
      {
        path:'',
        redirect:'news'
      },
      {
        path:'news',
        component: ()=>import('../components/home/homeCpnt/News'),
      },
      {
        path: 'msg',
        component: ()=>import('../components/home/homeCpnt/Message')
      }
    ],
    meta:{
      title:"主页"
    }
  },
  {
    path:"/about",
    component: about,
    meta:{
      title:'关于'
    }
  },
]
const router = new VueRouter({    
  routes,
  mode:"history",
  linkActiveClass:"active",
})
router.beforeEach((to,from,next)=>{     //使用导航卫士来更改当前标签的标题
  document.title=to.matched[0].meta.title
  // console.log(to);
  next()   //必须要调用
})

9. 组件的keep-alive

使得组件不会被频繁的创建和销毁，用法为将router-view包含在keep-alive标签中，keep-alive标签含有include和exclude属性，用来排除或者包含指定的标签后面为字符串或者正则表达式，如果有多个组件，使用逗号隔开。

<keep-alive exclude="Profile">
  <router-view></router-view>
</keep-alive>