路由

当应用变得复杂以后，我们需要医学便捷、高效的方式来管理应用，最常见的就是通过路由
路由：把url与应用中的对应的组件进行关联，通过不同的url访问不同的组件

<u>vue-router</u>的安装

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:muRouter
});

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>