vue 隐藏占位符_Vue-前端路由

一、路由的基本概念

路由的本质就是对应关系，在开发中，分为前端路由和后端路由。

1. 后端路由

概念：根据不同的用户 URL 请求，返回不同的内容

本质：URL 请求地址与服务器资源之间的对应关系

• 后端路由有性能问题，Ajax前端渲染提高性能，但是不支持浏览器的前进后退操作
• SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
• SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）
• 在实现SPA过程中，最核心的技术点就是前端路由

2. 前端路由

概念：根据不同的用户事件，显示不同的页面内容

本质：用户事件与事件处理函数之间的对应关系

2.1 实现简易版前端路由

占位符是动态显示的部分

<div id="app">
    <a href="#/zhuye">主页</a>
    <a href="#/keji">科技</a>
    <a href="#/caijing">财经</a>
    <a href="#/yule">娱乐</a>

    <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
    <!-- 可以把 component 标签当做是【组件的占位符】 -->
    <component :is="comName"></component>
</div>

Vue

// 定义组件
const zhuye = {
    
    template: '<h1>主页信息</h1>'
}
const keji = {
    
    template: '<h1>科技信息</h1>'
}
const caijing = {
    
    template: '<h1>财经信息</h1>'
}
const yule = {
    
    template: '<h1>娱乐信息</h1>'
}
const vm = new Vue({
    
    el: '#app',
    data: {
    
        comName: 'zhuye'
    },
    // 注册私有组件
    components: {
    
        zhuye,
        keji,
        caijing,
        yule
    }
})

// hash值改变就会触发
window.onhashchange = function() {
    
    // location.hash 最新的hash值
    switch (location.hash.slice(1)) {
    
        case '/zhuye':
            vm.comName = 'zhuye'
            break
        case '/keji':
            vm.comName = 'keji'
            break
        case '/caijing':
            vm.comName = 'caijing'
            break
        case '/yule':
            vm.comName = 'yule'
            break
    }
}

显示：

二、Vue Router 路由管理器

官网：https://router.vuejs.org/zh/

• 支持HTML5 历史模式或 hash 模式
• 支持嵌套路由
• 支持路由参数
• 支持编程式路由
• 支持命名路由

1. 基本使用

1. 引入相关的库文件
2. 添加路由链接
3. 添加路由占位符
4. 定义路由组件
5. 配置路由规则并创建路由实例
6. 把路由挂载到 Vue 根实例中

<!-- 1.导入 vue 文件 -->
<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib