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
