vue-router 路由基本使用

在Vue中实现多个页面跳转时，vue-router是必不可少的官方路由插件。今天就给大家介绍下vue-router，以及它的基本使用方法。

一、介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

这是来自官网的介绍，但大家可能会疑惑，我们不是实现多页面跳转吗，怎么是单页面应用？其实vue-router就是一款单页面应用（SPA）的路径管理器。相比于多个html或jsp页面组成的传统多页面应用，SPA在路由跳转时不会加载整个页面，而是更新页面中相应的组件。这种响应式方式优化了页面切换的速度，具体讲解可以看我之前写的【Vue简易入门】什么是Vue？

二、搭建vue-router

首先下载npm包。

npm install vue-router --save

创建一个/router文件夹，添加index.js文件，并写入以下代码。

import Vue from 'vue'
import Router from 'vue-router'
// 引用组件
import Menu from '@/pages/Menu'
import About from '@/pages/About'

Vue.use(Router) //全局引用

// 创建router对象
export default new Router({
    mode: 'history',
    routes: [{
        path: '/menu',
        component: Menu,
    }, {
        path: '/about',
        component: About
    }]
})

在main.js中加入router，就搭建好vue-router啦

new Vue({
    el: '#app',
    router, //加入router
    components: { App },
    template: '<App/>',
}).$mount('#app')

三、静态路由

在组件中使用静态路由，要在html中用< router-link >加入路由链接，< router-view >显示路由内容。这里在App.vue中实现导航栏作为例子。

// App.vue
<template>
  <div id="app">
    <header>
    <!-- 点击router-link后导航到指定路由 -->
      <router-link to="/menu">Menu</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <!-- 对应的路由内容渲染到router-view中 -->
    <router-view></router-view>
  </div>
</template>

在页面渲染时，< router-link >会自动渲染为< a >标签。那如果不想要在页面上展示链接，而是通过JS逻辑判断来进行路由跳转呢？这时候可以用到router.push方法。拿登录拦截举个例子，如果没检测到token则跳转login页，检测到则跳转menu页。

<script>
  export default {
    created() {
      if (this.$route.path === '/') {
        if (localStorage.getItem('login')) {
          this.$router.push('/menu');
        } else {
          this.$router.push('/login');
        }
      }
    },
  };
</script>

四、动态路由

当我们想要在跳转路由时传递参数，需要用到动态路由。我们需要在router对象的path后加上一个参数定义，这里以user页作为例子，每次跳转需要传递一个userID。

// index.js
export default new Router({
    mode: 'history',
    routes: [{
        path: '/menu',
        component: Menu,
    }, {
        path: '/about',
        component: About
    },
    /* 新添的user路由，增加了id动态属性 */
    {
        path: '/user/:id', 
        component: User,
    }]
})

然后在组件的router-link里加入参数，但跳转的路由同样是user页，只是包含不同参数。

// App.vue
<template>
  <div id="app">
    <header>
      <router-link to="/menu">Menu</router-link>
      <router-link to="/about">About</router-link>
     <!-- 两个传递不同userID的router-link -->
      <router-link to="/user/jeffrey">UserJeffrey</router-link>
      <router-link to="/user/kevin">UserKevin</router-link>
    </header>
    <router-view></router-view>
  </div>
</template>

如何获取这个参数呢？在user页里用route.param.id来接收。

// User.vue
<script>
export default {
  data() {
    return {
      userID = '',
    }
  },
  created() {
    this.userID = this.$route.param.id;
  },
</script>

更多的传参方法可以看我上篇写的Vue 路由传参的三种常用方法。

五、嵌套路由

最后，当我们想进入Menu路由后，才有Graph和Count两个路由怎么办？这时候就需要用到嵌套路由。在router对象中，我们将Graph和Count两个子路由放在Menu路由的children属性里。

// index.js
export default new Router({
    mode: 'history',
    routes: [{
        path: '/menu',
        component: Menu,
        children: [	//加入子路由
        	{
	        	path: '/graph',
	        	component: Graph,
	        }, {
	        	path: '/count',
	        	component: Count,
	        }
        ]
    }, {
        path: '/about',
        component: About
    },
    {
        path: '/user/:id', 
        component: User,
    }]
})

再在menu组件中加入两个子路由的router-link，像graph组件的路径就是/menu/graph了。

路由的基本使用就是这些啦，下期可以讲讲使用路由实现权限管理。


↓喜欢文章的话，就给作者点个赞加关注吧~