Vue 路由与根组件

Vue 路由与根组件

路由核心配置：

router/index.js

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

// import 别名 from '文件'
import Home from '../views/Home'
import About from '../views/About'
import First from '../views/FirstCP'

// 路由配置
// 1）当用户在浏览器中访问的路由是 / ，router插件就会加载 Home.vue文件，同理 /about 就是 About.vue文件
// 2）将加载的 Home.vue文件 或者 About.vue文件，去替换App.vue文件中的 <router-view />占位符
// 3）用redirect配置来实现路由的重定向
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',  // 路由的重定向
    },
    {
        path: '/about',
        name: 'About',
        component: About
    },
    {
        path: '/first',
        name: 'First',
        component: First
    }
];

根组件占位渲染页面组件

<!--
1) App.vue是项目的根组件，是唯一由main.js加载渲染的组件，就是替换index页面中的<div id="app"></div>的占位标签
2) 实际开发中App.vue文件中，只需要书写下方五行代码即可（可以在此基础上额外增加其他代码）
3）router-view是前台路由占位标签，由router插件控制，可以在router的配置文件中进行配置
4) router-view就是根据router在index.js中配置的路由关系，完成指定路径匹配指定页面组件，进行渲染
5) router-view会被不同的页面组件替换，就形成了页面跳转
-->

<template>
    <div id="app">
        <!-- 前台路由占位标签，末尾的/代表单标签的结束 -->
        <router-view />
    </div>
</template>