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>组件来显示当前路由对应的组件。