Vue项目单页面应用控制机制Vue-router详解

1、路由基本配置

a、路由

什么是路由呢？那么路由在我们单页面应用中是一个很重要的角色，它就是用来切换组件的。因为我们单页面应用中是没有页面这样一个概念的，它只有一个页面，也就是我们常见的index.html，那么我们是通过组件切换来模拟页面跳转的效果，所以这就是vue-router要实现的作用。

b、vue-router使用

首先，我们先建一个Home组件(Home.vue)，如下：

代码如下：

<template>
  <div>
    this is home
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>

那么我们怎么使用vue-router？首先我们就要进行一个配置，我们在项目创建时，如果安装了vue-router，那默认就会在我们项目中生成一个router.js，如下图：

文件里面已经基本上生成了一个代码结构，然后通过“Vue.use(Router)”将router挂载到我们的Vue实例上，我们就能使用这个vueRouter了，如代码结构解析所示：

//首先引入Vue
import Vue from 'vue'
//其次引用vue-router
import Router from 'vue-router'
//之后把Router挂载到我们Vue当中
Vue.use(Router)

export default new Router({
	//routes配置
    routes: [{
       path: '/home',  //访问路径
       //懒加载
       component: () => import('./views/Home.vue'),  //访问组件
	}]
})

路由基本参数：
path：路由的访问路径。即url component：访问路径对应的组件

路由扩展参数 ：
name：路由指定命名，设置后可⽤params传参及使⽤name进⾏路由跳转

问题来了，我们的组件(Home.vue)定义好了，路由(router.js)也配置好了，那么我们需要怎么在我们指定的组件里面显示我们指定的路由组件呢？所以我们需要引进一个标签“router-view”，通过“router-view”，我们就能显示我们定义的组件了，比如我们需要在入口组件App.vue里面使用，如下在App.vue中加入该标签：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

我们在浏览器地址栏中加入“/home”，我们就可以跳转到改页面了，如图：

2、路由的跳转

路由的跳转究竟是怎么一回事呢？熟悉多页面应用开发的朋友应该都知道，我们传统的跳转都是通过“a”标签的，那么vue中有如下两种种方式：

a、router-link

先看一个例子，我们在App.vue中定义一个“router-link”标签，如下：

<template>
  <div id="app">
    这是App入口组件
    <router-link to="/home">跳转到home组件</router-link>
    <router-view></router-view>
  </div>
</template>

to属性表示跳转的意思，类似于“a”标签的href属性。

再来看下界面效果，点击“跳转到home组件”就能跳转到Home页面了，且地址栏也跟着变化了：

b、编程式导航

本质上其实是通过事件方式(函数式)来实现跳转的，那怎么进行一个使用呢？比如我们定义一个跳转触发“button”，我们点击它时就让页面跳转，

<template>
  <div id="app">
    这是App入口组件
    <router-link to="/home">跳转到home组件</router-link>
    <button @click="toHome"></button>
    <router-view></router-view>
  </div>
</template>

再定义一个跳转动作函数：

methods: {
    toHome () {
        this.$router.push({ path: '/home'})
    }
  }

看下效果，点击跳转同样也会跳转到Home组件：

3、动态路由

动态路由？简单的来解释，加入我们有个商品的详情页，我们通过id的不同来展示不同的商品页面，我们该怎么做呢？我们一般会在url上定义一个参数，用这个参数来获取这个id，然后根据id的不同来请求到不一样的数据，也就是说我们定义了一个动态的路由。那怎么定义一个动态路由呢？我们定义动态路由就可以在“path”这里定义，如下：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    routes: [{
       path:"/home/:id", //表明我们进入的这个页面是需要传参数的页面，这个参数是id
        //懒加载
       component: () => import('./views/Home.vue'),  //访问组件
    }]
})

回到上一个例子，我们刷新下页面，发现带“/home”的路径已经进不去了，因为我们的页面现在带参数了，所以我们在进如之前需要传递一个参数，为了便于观察，我们在Home组件中将参数输出，如下：

<template>
  <div>
    this is home
    <h1>{{$route.params.id}}</h1>
  </div>
</template>

接着看下效果，我们再地址栏输入id参数值为“123”，跳转到了Home页面，也显示出了我们传递的参数：

这使我们直接在地址里面传入的一个参数，在真实项目情况下是很少会这么做的，通常是在代码层面进行控制的，可以改成如下方式：

methods: {
    toHome () {
        //方式一：path+query的方式
        this.$router.push({ path: '/home',query:{id:"123"}})
        //方式二：name+params的方式
        this.$router.push({ name: '/home',params:{id:"123"}})
    }
  }

以上两种方式均可使用，但是注意的是，name+params的方式，name表示对应的路由名称，使用这种方式的时候，我们需要在路由定义的时候加上name字段来定义名称，如下：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    routes: [{
       path:"/home", //表明我们进入的这个页面是需要传参数的页面，这个参数是id
       name:"home",  //路由名称
       //懒加载
       component: () => import('./views/Home.vue'),  //访问组件
    }]
})

4、嵌套路由

什么是嵌套路由呢？顾名思义，我们希望在一个组件里面嵌套另外一个组件，我们常用在布局当中，比如说我们常用的后台管理系统，有Header、Container、Footer这几个大的部分组成，我们经常改变的是Container区域的内容，这部分我们通常是用router-view来渲染出来，这样我们就能达成效果了。比如我在Home组件中想再显示一个子组件，刚刚说了，想在哪里显示我们就在那里加一个router-view，如下Home.vue：

<template>
  <div>
    this is home
    <h1>{{$route.params.id}}</h1>
    <router-view></router-view>
  </div>
</template>

之后，我们怎么定义这个嵌套路由呢？因为我们是显示在Home.vue下面的，所以我们就在Home这个路由里面再定义一个子路由，添加children属性：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    routes: [{
       path:"/home/:id", //表明我们进入的这个页面是需要传参数的页面，这个参数是id
        //懒加载
       component: () => import('./views/Home.vue'),  //访问组件
       children:[{
          path:"/child", 
          component: () => import('./views/Child.vue'),
       }]
    }]
})

我们看下访问效果:

5、路由守卫

导航守卫是什么意思呢？有什么作用？比如我们通常可能遇到这样的场景，进入到路由时我们需要做一些事情，比如获取token？获取用户权限等等，我们需要怎么做？我们可以在main.js里面写一个钩子：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI)

//路由守卫钩子
router.beforeEach((to, from, next) => {
  console.log(to.path)
  next()
})

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

导航守卫钩子参数
to – 将要访问的路由；
from – 上一个路由；
next – 下一步的选择，也就是我们必须调用这个next()方法才能进行下一步。

6、路由懒加载

即通过如下写法实现懒加载：

export default new Router({
    routes: [{
       path:"/home", //表明我们进入的这个页面是需要传参数的页面，这个参数是id
       name:"home",  //路由名称
       //懒加载
       component: () => import('./views/Home.vue'),  //访问组件
    }]
})

推荐：用路由懒加载方式引用组件，如非懒加载，在界面加载时会加载路由中所有配置的组件，懒加载时，只会在进入到界面时才会加载这个组件。

本节讲解示例代码下载地址：下载地址