路由的创建和使用（单文件组件）

路由的创建和使用（单文件组件）

1.创建一个js文件，最好放在utils目录

// 引入vue
import Vue from 'vue';
// 暴露并创建vue实例
export default new Vue();

2.创建一个js文件，放在router目录下

// 1.工程化
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//3. 引入组件
import Index from '@/components/day6/路由的创建和应用/index.vue';
import School from '@/components/day6/路由的创建和应用/school.vue';

// 2.创建路由实例
const router = new VueRouter({
  // 配置
  routes: [
    {
      path: '/index', //路由路径 --hash地址
      component: Index, //路由映射组件
    },
    {
      path: '/school',
      component: School,
    },
  ],
});
// 暴漏
export default router;

3.在main里面引入（在vue实例里添加router）

import router from './router/index';



// Vue实例,用于实现组件的渲染
new Vue({
  router,
  // render函数,它有一个参数h,h是真正的实现渲染功能的函数
  // 下面这句代码的意思是渲染App组件并将渲染的结果返回
  render: (h) => {
    return h(App);
  },
}).$mount('#app'); // $mount是挂载渲染好的组件内容到指定的元素 #app是index.html中的模板结构

4.创建app.vue

<template>
  <div id="app">
    <!-- router-link添加超链接 -->
    <router-link to="/index">首页</router-link>
    <router-link to="/school">学校</router-link>
    <!-- 设置路由映射组件的展示区域 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style></style>