vue -- 3【vue-router】

Vue-Router  ---> 实现跳转时不需要刷新页面

1 路由原理：window下的hashchange事件

　　允许通过不同的url访问不同的内容，可以实现多视图的单页面web应用。

　　001 多页面应用MPA（Multiple Page Application）

　　002 单页面应用SPA（Single Page Application）

vue-router是通过插件的形式来扩展vue的功能，必须通过vue.use()方法安装路由功能。

2 使用步骤

2.1 引入vue-router

import Vue from ‘vue‘;
import VueRouter from ‘vue-router‘;

2.2 使用（安装）vue-router

Vue.use(VueRouter)

2.3 实例化vue-router并配置参数routes

const router = new VueRouter({
  // 配置参数 
  routes: [{
    // 当浏览器地址为/home时，显示home组件的内容（显示在<router-view/> 组件中）
    name: ‘home‘,
    path: ‘/home‘,
    component: Home
  }]
})

2.4 导出router实例，并把router实例注入到vue实例中

export defaulr router;

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

2.5 在组件中使用<router-view/>，显示组件内容

vue -- 3【vue-router】

原文：https://www.cnblogs.com/pleaseAnswer/p/14070673.html