Vue路由简单介绍

什么是路由（route）

• 后端路由：对于普通的网站，所有的超链接都是URL地址，所有URL地址都对应服务器上的相关资源，后端路由的工作就是将URL地址和服务器上的资源进行匹配。
• 前端路由：对于单页面应用程序来说，主要通过URL中的hash（#号，就相当于锚链接中的锚点）来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容（也就是说https://www.baidu.com#/login中‘#’后面的内容在请求中都会被忽略），所以，单页面程序中的页面跳转主要用hash实现，不会涉及到页面刷新。
• vue路由：vue中通过使用路由进行组件切换。

安装vue-router

1. 通过链接https://unpkg.com/vue-router/dist/vue-router.js可直接下载。
2. 使用NPM命令

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

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

Vue.use(VueRouter)

如果使用全局的 script 标签，则无须如此 (手动安装)。

vue-router基本使用

1. 安装导入路由模块。
2. 创建一个路由对象（new VueRouter({})），当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter。
3. 给配置对象设置route属性，route属性表示路由匹配规则，后面加s表示多个路由匹配规则。
4. 将路由规则对象注册到vm实例上，用来监听URL地址的变化，然后展示对应组件。

注：

• 每个路由规则都是一个对象，该对象有两个必须的属性：属性1是path，表示监听的那个路由链接地址；属性2是component，表示如果路由匹配到的是前面的path，则展示component属性对应的那个组件。（注意：component的属性值必须是一个组件的模板对象，不能是组件名称）
• < router-link >元素默认渲染为a标签，可通过tag属性设置为其他标签，但不管设置为什么标签，都默认绑定了一个点击事件。该元素的to属性和路由规则的path属性类似。

<div id="app">
    <!-- <a href="#/login">登录</a>
    <a href="#/register">注册</a> -->

    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <!--这是Vue-router提供的元素，专门用来当占位符的，这样路由匹配到的组件就会展示到这个route-view中去-->
    <router-view></router-view>
</div>
<script>
    //组件模板对象
    var login = {
        template: '<h1>登录组件</h1>'
    }

    var register = {
        template: '<h1>注册组件</h1>'
    }
    
    var routerObj = new VueRouter({
        //注意：！！！不是routers而是routes
        routes: [
            {
                    path: '/',
                    redirect:'/login'//默认为登录页面
             },{
                path: '/login',
                component: login
            }, {
                path: '/register',
                component: register
            }
        ]
    })

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: routerObj
    })
</script>