vue-router

文章目录

vue-router路由vue-router 的安装Vue.use()创建路由对象router-view 组件

路由

当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由

路由：把 url 与 应用中的对应的组件进行关联，通过不同的 url 访问不同的组件

vue-router 的安装

npm i vue-router // OR yarn add vue-router

Vue.use()

通过前面提到的 Vue.use 方法，把 vue-router 安装到指定的 Vue 实例中

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter);

创建路由对象

通过 vue-router 提供的 Router 构造函数（类）创建路由对象，路由对象包含了当前使用的模式（hash、history）、路由信息（url 与 组件的对应关系）等信息

import Router from 'vue-router'; import Home from './views/Home.vue'; import About from './views/About.vue'; const myRouter = new Router({ mode: 'history', routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] }); ..., new Vue({ ..., router: myRouter });

router-view 组件

配置了路由信息以后，我们还需要中页面（组件）中指定路由对应的组件出现的位置，当当前访问的 url 与某个路由信息匹配的时候，该组件就会出现在 router-view 组件所在的位置

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