Vue Router 和 Vue Route 是 Vue.js 中用于构建单页面应用（SPA）路由系统的两个核心概念。Vue Router 是 Vue.js 的官方路由管理器，而 Vue Route 则是在 Vue 组件内部通过 $route 对象来访问当前路由的信息。

Vue Router 的使用

Vue Router 主要用于定义路由规则、创建导航链接以及渲染与 URL 对应的组件。以下是一个简单的使用示例：

1. 安装和引入 Vue Router

首先，你需要在项目中安装 Vue Router：

npm install vue-router

然后，在你的 Vue 应用中引入并使用 Vue Router：

import Vue from 'vue';  
import Router from 'vue-router';  
import Home from './views/Home.vue';  
import About from './views/About.vue';  Vue.use(Router);  export default new Router({  routes: [  {  path: '/',  name: 'home',  component: Home  },  {  path: '/about',  name: 'about',  component: About  }  ]  
});

2. 在 Vue 应用中使用路由

在你的 Vue 应用入口文件（如 main.js）中，引入并使用这个路由实例：

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

3. 在组件中创建导航链接和渲染路由内容

在 App.vue 或其他组件中，使用 <router-link> 创建导航链接，并使用 <router-view> 来渲染当前路由对应的组件：

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

Vue Route 的使用

Vue Route 主要通过 $route 对象在 Vue 组件内部访问当前路由的信息。以下是一些常用的 $route 属性：

• $route.path：字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
• $route.params：一个包含动态片段和星号片段的键值对的对象。
• $route.query：一个包含查询参数的对象。例如，对于路径 "/foo?user=1"，则有 $route.query.user == 1。
• $route.name：当前路由的名字（如果有的话）。

示例：在组件中访问路由信息

假设你有一个组件，你想根据当前路由的参数或查询参数来改变其内容。你可以这样使用 $route：

<template>  <div>  <h1>User Info</h1>  <p>User ID: {{ $route.params.id }}</p>  <p>Query Parameter: {{ $route.query.param }}</p>  </div>  
</template>  <script>  
export default {  name: 'UserInfo',  watch: {  '$route.params': function(toParams, fromParams) {  // 对路由变化作出响应...  }  }  
}  
</script>

在这个示例中，我们创建了一个名为 UserInfo 的组件，它显示当前路由的 id 参数和查询参数 param。我们还使用了 Vue 的 watch 选项来监听 $route.params 的变化，以便在路由参数变化时执行某些操作。

综合示例

将 Vue Router 和 Vue Route 结合使用，你可以构建复杂的单页面应用。以下是一个更综合的示例：

定义路由时包含一个带有参数的路由：

export default new Router({  routes: [  // ...其他路由  {  path: '/user/:id',  name: 'user',  component: User  }  ]  
});

在 User 组件中，根据 $route.params.id 显示不同用户的信息：

<template>  <div>  <h1>User {{ $route.params.id }}</h1>  <!-- 根据 $route.params.id 加载和显示用户数据 -->  </div>  
</template>  <script>  
export default {  name