Vue前端路由

1.什么是前端路由？

在H5之后，单页面应用技术(Single Page App)比较流行，单页面指的是整个项目只有一个页面；单页面应用主要是通过设置哈希值(hash)来进行组件之间的切换；这种采用哈希值进行页面切换的技术就是前端路由；

一个完整的url的组成部分中#后面的部分就是哈希值，哈希值最初的应用就是为了实现页面锚点的作用；

哈希值：url地址上#后面的东西都是哈希值；

前端路由：根据设置的哈希值进行组件之间的切换，这种采用哈希值进行页面切换的就是就是哈希值；

2. 优势和原理

优势：切换的时候页面不用刷新；

原理：是根据在路径后面拼接#/+关键词，页面不刷新，地址栏中hash发生变化，触发window.onhashchange事件；

 3. Vue路由配置

1. 引入vue-router,js文件；

2. 在根组件标签对中添加router-link标签对，设置其to属性为对应的哈希值(/main);

3. 在根组件标签对中添加router-view标签对，此标签对用来显示组件的模板内容；

4.在js中使用变量设置组件(该组件返回的是构造函数，推荐使用大驼峰命名法)；

5.创建路由对象,并且添加路由匹配规则(使用new VueRouter)。在该对象中使用routes字段设置数组,数组中每一个元素都设置一个对象，该对象中path的值是路由的地址(即router-link中to属性的值相同)，component设置路由所对应的组件(刚刚用来接受组件的变量)；

6.  在根组件中组测路由器对象；

 在第5步中，需要设置刚进入时候的路由匹配规则；path为‘/’，不在是component，而是redirect进行重定向，redirect的值与path相同是路径；

一个页面有且最多有一个路由器对象；

4. 代码演示 

<div id="app">
    <!-- 2 在vue路由通过router-linker组件进行页面跳转,其实对a标签的封装
        to属性设置为跳转组件对应的哈希值。不加#
    -->
    <router-link to="/home">首页</router-link>
    <router-link to="/login">登录</router-link>
    <router-link to="/user">用户</router-link>
    <!-- 6. 添加路由的出口标签 router-view-->
    <router-view></router-view>
</div>
<!-- 1.导入vue路由第三方 -->
<script src="./vue-router.js"></script>

// 3.添加路由跳转所对应的组件
var Home = Vue.component('homeCom', {
    template: `<h1>这是首页</h1>`,
})
var Login = Vue.component('homeCom', {
    template: `<h1>这是登录</h1>`,

})
var User = Vue.component('homeCom', {
    template: `<h1>这是个人页面</h1>`,

})

// 4，创建路由对象，并且添加路由匹配规则
var router = new VueRouter({
    // router 路由器对象 有且仅有一个
    // routes 路由器当中的组件和路由的匹配关系 一条路线
    routes: [{
        // path 路由的地址
        // component 路由所对应的组件 返回的是一个构造函数
        path: '/home',
        component: Home
    }, {
        path: '/login',
        component: Login
    }, {
        path: '/user',
        component: User
    },
    // component: Home 违背了唯一性
    {
        path: '/',
        // component: Home
        // redirect 重定向 后面与path相同是路径
        redirect: '/home'
    }
    ],

})

new Vue({
    el: '#app',
    data: {

    },
    methods: {

    },
    // 5 在根组件种注册路由器对象
    router: router
})