vue.router和vue.route

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