Vue-router的使用和出现空白页,路由对象属性详解

Vue-router是Vue.js官方的路由管理器，可以快速地搭建单页面应用程序（SPA），并提供了丰富的导航解决方案。

Vue-router的使用

1. 安装和引入

安装Vue-router可以使用npm或yarn，在项目目录下运行以下命令：

npm install vue-router

安装完成后，在项目中引入Vue-router：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    // 配置路由
  ]
});

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

2. 配置路由

路由的配置分为两步，一是定义路由映射，二是实例化VueRouter，将定义的路由映射注入到VueRouter实例中。

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

在上面的代码中，通过routes数组定义了两个路由映射，当用户访问/home时，会渲染Home组件，访问/about时，会渲染About组件。

3. 配置导航

Vue-router提供了<router-link>组件来实现导航，可以将to属性设置为路由地址，当用户点击该链接时，会自动跳转到对应的路由。

<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>

同时，Vue-router还提供了编程式导航的方式，可以在Vue实例中使用$router对象来实现路由跳转。

// 在Vue组件中使用
this.$router.push('/home');

出现空白页

在使用Vue-router的过程中，如果不加注意，可能会出现空白页的问题，这是由于路由配置不正确导致的。

1. 缺少根路由

在定义路由时，如果没有定义根路由，则会导致路由无法匹配到任何一个路由，最终渲染结果就是一个空白页。

// 错误示例
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

// 正确示例
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

在上面的示例中，第一个示例缺少了根路由配置，因此无法匹配到任何一个路由，会导致页面空白。第二个示例正确地定义了根路由，使用户访问根路径时，可以渲染Home组件。

2. 使用HTML5 history模式

在Vue-router中，默认的路由模式为hash模式，即所有路由都带有一个#，因此路由的变化不会触发浏览器的刷新操作。但是，如果使用HTML5 history模式，则需要后端配合，在访问不存在的路由时，返回正确的页面，否则也会出现空白页的情况。

const router = new VueRouter({
  mode: 'history',
  routes: [
    // ...
  ]
});

路由对象属性详解

在Vue-router中，路由对象是指当前激活的路由信息对象，包含了当前路由的基本信息，如path、params、query等等。

1. $route.path

$route.path是当前起作用的路由对应的路径。

例如，当前路由为/home，则$route.path为/home，如果为/home/1，则为/home/1。

2. $route.params

$route.params是一个键值对，包含了动态片段和全匹配片段的信息。

在定义路径中，如果使用了动态路由，则可以使用$route.params获取该动态路由的值。

例如，在路由配置中定义了/user/:username，则可以使用$route.params.username获取动态路由的值。

3. $route.query

$route.query是一个键值对，包含了路由参数的信息。

例如，在访问/home?name=vue&author=yuxi时，可以使用$route.query获取name和author的值，即：

{
  name: 'vue',
  author: 'yuxi'
}

在Vue组件中，可以通过this.$route来获取当前路由信息。