Vue 路由应用详细讲解

Vue.js 是一个流行的前端 JavaScript 框架，它强大并且灵活，可以快速搭建前端应用。在 Vue.js 中，路由是一种实现前端页面切换的技术，通过路由可以实现前端应用的页面跳转。

基本的 Vue.js 路由配置

在 Vue.js 中，我们可以通过 vue-router 模块来实现路由功能。下面是一个基本的路由配置示例：

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

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path: '/about',
        component: About
    }
];

const router = new VueRouter({
    routes
});

export default router;

在上面的代码中，我们先引入了 vue-router 模块并调用了 Vue.use(VueRouter) 来使用它。然后定义了一个 routes 数组，这个数组中包含了应用的所有路由信息。每个路由都是一个对象，包含 path 和 component 两个属性。其中 path 是路由的路径，component 是该路由对应的组件。

最后，我们使用 new VueRouter() 创建了一个路由实例，并将 routes 传入构造函数。最后通过 export default router 将路由实例导出，以便其他组件可以使用它来进行页面的跳转。

在 Vue.js 中使用路由

在定义好路由后，我们需要在 Vue.js 的应用中使用路由。通常，在 Vue.js 中使用路由分为两个步骤：在入口文件 main.js 中挂载路由并将其作为选项注入 Vue 实例中，然后在组件中使用路由进行页面跳转。

在 main.js 中挂载路由

在 main.js 中定义好路由，并将其作为选项注入到 Vue 实例中，如下所示：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

在上面的代码中，我们首先引入了 App 组件，这是整个应用的根组件。然后通过 import router from './router' 引入了我们在上面定义好的 router。最后在实例化 Vue 时通过选项 router 将路由注入 Vue 中。

在组件中使用路由

在组件中使用路由时，我们可以使用 router-link 和 router-view 这两个内置的组件。

router-link 用于生成路由链接，其 to 属性指定跳转的路由路径，如下所示：

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

在上面的代码中，我们分别定义了两个路由链接，分别指向路由路径 / 和 /about。

router-view 用于显示当前路由路由对应的组件，如下所示：

<router-view></router-view>

在上面的代码中，我们使用了 router-view 组件来显示当前路由对应的组件。

Vue.js 路由参数

在 Vue.js 路由中，我们可以定义路由参数，用于动态地在路径中插入变量。下面是一个路由参数的示例：

const routes = [
    {
        path: '/user/:id',
        component: User
    }
];

在上面的代码中，我们定义了一个路由参数 id，通过 : 来指定。当路由跳转到 /user/123 时，路径中的 123 就会被解析为 id，并作为参数传递给 User 组件。

在组件内部，可以通过 $route.params.id 来获取路由参数的值。

示例应用

下面是一个使用 Vue.js 路由的示例应用。

安装依赖

首先，我们需要安装 Vue.js 和 vue-router：

npm install vue vue-router --save

创建组件

接下来，我们创建两个组件，Home 和 About，分别对应着应用的首页和关于页面。

<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to my home page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<template>
  <div>
    <h2>About</h2>
    <p>Learn more about me.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

配置路由

在 router.js 中配置路由：

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

import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path: '/about',
        component: About
    }
];

const router = new VueRouter({
    routes
});

export default router;

挂载路由

在 main.js 中挂载路由并将其注入Vue实例中：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

使用路由

在 App.vue 中使用路由：

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

在上面的代码中，我们通过 router-link 组件生成了两个路由链接，分别指向 / 和 /about，并使用 router-view 组件在页面中展示路由对应的组件。

现在，我们就可以在应用中使用路由功能了。