现代网络应用是高度复杂的，通常包括多个层次、路由和路径；就其本身而言，静态路由，即手动定义的路由是非自适应的，具有固定的值，已经不足以满足现代开发者和应用用户的需求。

顾名思义，动态路由要灵活得多。一个动态路由让我们定义多个路径，根据实时网络变化来显示信息。我们可以使用动态路由使URL更容易记忆和用户友好，创建相似但包含不同数据的页面。

在本教程中，我们将使用Vue 探索Vue中的动态路由，学习它如何提高我们应用程序的性能。让我们开始吧!

设置一个Vue应用程序

为了了解Vue的动态路由，首先，我们将分别使用Vue CLI或Yarn设置一个新的Vue应用程序。

# Vue CLI
npm install -g @vue/cli
# yarn
yarn global add @vue/cli

运行下面的代码来验证Vue是否被正确安装。

vue --version

现在，在安装了Vue后，我们可以创建一个新的应用程序，如下所示。

vue create routing-example

要在Vue中创建一个路由，我们需要定义一个路径，链接到我们想在URL加载后显示的特定组件。

对于我们的例子，我们将创建一个有两个页面的应用程序，一个主页和一个博客页面。让我们为这两个页面定义视图。

注意：为了简单起见，下面的代码不包含我们两个页面的任何样式或内容，而是集中在路由组件上。

// /views/Home.vue

// /views/Blogs.vue
<template>
  <div>
    <h1> Welcome to blogs page h1>
    <p>This is the page opens on <strong>/blogsstrong> routep>
  div>
template>

添加静态路由

接下来，让我们为我们的组件添加两条静态路由。我们还将定义一个组件，在到达路由时显示。创建一个名为 的单独文件夹；在里面创建一个名为index.js 的文件，并添加以下代码。

// /router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Blogs from '../views/Blogs.vue'
Vue.use(VueRouter)
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    //  Added our new route file named profile.vue
    {
        path: '/blogs',
        name: 'Blogs',
        component: Blogs
    }
]
// Create Vue Router Object
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})
export default router

为了运行我们的应用程序，我们将在我们的App.vue 文件中添加一个路由器，如下所示。

// App.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Homerouter-link> |
      <router-link to="/blogs">Blogsrouter-link>
    div>
    <router-view/>
  div>
template>
<script>
export default {
  name: 'App',  
}
script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-top: 60px;
}
#nav {
  font-size: 1.25rem;
  margin: 2rem;
}
style>

如果你前往 [:8080/](:8080/)，你会看到两条路由，它们将打开主页和博客页面。

在Vue中添加动态路由

当你的应用程序很简单时，使用静态路由的路由是相当直接的，然而，现实中，你的项目将比仅仅是一个主页和博客页面更复杂。

例如，假设我们的博客有100篇文章，每篇都有一个独特的URL。为每篇博客文章创建一个新的组件，并单独添加一个路径，这不是一个可行的选择。

相反，我们可以在我们的应用程序中添加动态路由。首先，让我们创建一个新的Post 组件，它将作为一个模板来显示每个独特的博客。

// /views/Post.vue
<template>
  <div>
    <h1> Welcome to Post page h1>
    <p>This is the page that opens on <strong>/blog/{{ $route.params.id }}strong> routep>
  div>
template>

用 阵列中的新路由更新/index.js 文件。记住要包括Post 组件的导入。

在下面的代码中，我们使用:id 作为路由的动态值。

{
    path: '/post/:id',
    name: 'Post',
    component: Post,
}

重新启动你的应用程序，在你的浏览器中进入:8080/post/- 。你应该看到post 页面，上面有确切的路由。

现在，当你向你的博客页面添加一个新的帖子时，Post 组件为URL创建一个模板，简化它并使用:id 作为一个动态值。我们可以以编程方式传递任何ID，一个路由将处理所有这些请求。

嵌套路由

现在我们已经用动态路由定义了我们博客的基本结构，我们可以使用嵌套路由，将多个路由组合成一个特定的层次结构，来定义与博客相关的额外功能。

例如，假设我们为作者定义了一个基本路由/ 。在 ，我们为各个作者嵌套了以下页面。

为了查找单个作者写的所有文章，我们将在层次结构上再向下嵌套一级，创建一个嵌套路由，其结构类似于//mohit/posts 。

首先，在 数组中增加一个元素。在包含这个路由的所有子路由的对象里面，我们将添加一个 字段。

{
    path: '/author/:id',
    name: 'Author',
    component: Author,
    children: [
            {
                    path: 'posts',
                component: AuthorPosts,
            }
    ]
}

URL重定向

URL重定向，也被称为URL转发，是一种技术，我们可以用它来使一个网页从一个以上的地址可用。从本质上讲，当用户试图打开一个已被重定向的URL时，浏览器会打开被重定向的URL。URL重定向是保护隐私和防止页面移动时链接中断的良好做法。

为了重定向一个URL，我们可以在route 对象中添加 属性。例如，假设我们想根据文章的名称来搜索一个帖子。我们可以使用查询参数将其重定向到一个类似的路由。

{
  // /search/postName -> /search?q=postName
  path: '/search/:postName',
  redirect: to => {
    return { path: '/search', query: { q: to.params.postName } }
  },
}

使用别名进行路由

别名是访问一个特定URL的另一个术语。例如，如果我们希望网站 ，如果用户键入 []()，我们可以给 域名添加一个别名。在这种情况下， 是这个别名的父站点。 []()别名。

我们还可以使用alias 属性向路由添加别名。继续我们的例子，假设我们想为blogs 路由添加一个别名。每当用户进入posts 路由，他们将看到与博客页面相同的内容。

{
  path: '/blogs',
  name: 'Blogs',
  component: Blogs,
  alias: '/posts'
}

总结

在本教程中，我们探索了使用Vue 向我们的Vue.js应用程序添加静态和动态路由。我们还学习了如何通过添加嵌套路由、URL重定向和别名来改进和定制我们的路由。

通过动态路由，我们可以通过我们的路由发送动态数据，允许我们简化长的、难以辨认的URL，并将网页分类为嵌套的层次结构。Vue 还包括许多其他伟大的功能，比如命名路由和路由转换。我希望你喜欢这个教程

The using Vue first Blog.