路由配置---初次使用

1.在src/views创建文件及文件下创建index.vue

说明：通过import Login from '@/views/login';导入组件，当前只指定了组件路径，默认导入的就是指定路径下的 index.vue 组件

2. 在 中配置路由（把原有的路由配置删除)

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

// 引入组件对象
import Login from '@/views/login';
Vue.use(VueRouter);

const routes = [
  {
    path: '/login', //请求的地址
    name: 'login', //路由名称
    component: Login //组件对象
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

3. 路由渲染出口，在 App.vue 中添加 <router-view></router-view>

说明，路由跳转的页面显示 ，可以设置样式，其他的页面会继承过来，不要加上scoped

 问题：为什莫页面显示app.vue中的内容

 解答：原本页面应该显示的是public文件下的index.html, 因为main.js中

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

render: function (createElement) {
    return createElement(App);
}

个人理解：createElement 函数是用来生成 HTML DOM 元素的，也就是上文中的 generate HTML structures，也就是 Hyperscript，这样作者才把 createElement 简写成 h。h是 Vue.js 里面的 createElement 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。