Vue中router和route的区别

router（路由器）

是vue.js中的一个插件(类似vuex也是一个插件)，用于管理路由。router负责解析URL路径，根据路由配置将用户导航到对应的组件，并处理路由变化时的状态更新，在SPA（单页面应用）中使用频率较高。

route（路由）

路由是将URL路径与对应的组件连接起来的桥梁，通常在创建路由配置时定义路由。

如何创建路由配置(以Vue2为例）

1. 首先需要安装VueRouter依赖（参考下方使用npm或yarn安装）

npm install vue-router

yarn add vue-router

2. 创建路由文件

在store文件夹下创建index.js（或router.js)，导入Vue和Vue Router，并创建一个新的路由实例：        

import Vue from 'vue';
import VueRouter from 'vue-router';
// 导入Vue和Vue Router

Vue.use(VueRouter);
// 使用Vue.use()方法来安装Vue Router插件

const router = new VueRouter({
  routes: [
    // 在这里定义路由配置
  ]
});

export default router;

3. 定义路由配置

在路由实例的routes选项中，每一个路由配置都是一个对象，包含path和component属性，分别用来指定对应URL和组件。

 routes: [
    { path: '/', component: Home },
    // 主页 路径默认为/
    { path: '/about', component: About },
    // 还可以添加更多的路由配置
  ]

4. 导入和使用路由配置

在程序的入口文件(通常是main.js)中,导入路由配置文件 import router from './router';

并将其作为Vue实例的选项之一

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

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

基本的路由配置已经创建完成，除此之外，还可以添加更多的路由配置，例如：定义嵌套路由(children)，路由参数（动态路由参数（params）/user:id，查询参数（query）/user?id=，哈希（hash）/.user#profile)，重定向等。

在需要使用路由的组件中通过<router-link>组件来生成链接，使用<router-view>组件来显示当前路由对应的组件。