路由
当应用变得复杂以后,我们就需要通过一种便捷、高效的方式来管理应用,最常见的就是通过路由
路由:把 url 与 应用中的对应的组件进行关联,通过不同的 url 访问不同的组件
1. vue-router 的安装
npm i vue-router
// OR
yarn add vue-router
2. Vue.use()
通过前面提到的 Vue.use 方法,把 vue-router 安装到指定的 Vue 实例中
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
3. 创建路由对象
通过 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
});
4. 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>