路由的起步

一. 路由的概念以及Vue-router的安装

后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源。

前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现，在单页面程序中，这种通过hash改变来切换页面的方式，称为前端路由（区别于后端路由）。

参考链接：https://www.cnblogs.com/m2maomao/p/10611983.html

安装：直接上cdn链接

<script src="https://unpkg.com/vue/dist/vue.js"></script>
//1.安装路由模块
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

二. vue-router的基本使用

步骤：
1.导入cdn链接，安装路由模块

2.创建子组件

3.创建一个路由对象，在new一个路由对象时，可以为构造函数，传递一个配置对象数组routes（这是必须的），其中每个路由规则，都是一个对象，这个规则对象有两个必须的属性：
属性1是：path，表示监听哪个路由链接地址
属性2是：component,表示如果路由是前面匹配到的path,则展示component属性对应的组件

例如：

var routerObj = new VueRouter({
            //这个配置对象中的route表示【路由匹配规则】的意思
            routes: [//路由匹配规则的数组
                //每个路由规则，都是一个对象，这个规则对象有两个必须的属性
                //属性1是：path，表示监听哪个路由链接地址
                //属性2是：component,表示如果路由是前面匹配到的path,则展示component属性对应的组件
                //component,必须是一个组件的模板对象，不能是组件的名称
                { path: '/login', component: login },
                { path: '/register', component: register }
            ]
        })

4.将创建好的路由对象，注册到vm实例上,用来监听URL地址的变化，然后展示对应的组件
例如：

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

5.将路由匹配到的组件通过<router-view></router-view>标签渲染出来
<router-view></router-view>的参考属性链接：<router-view> Props

6.代码演示：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <div id="app">
        <a href="#/login">登录</a>
        <a href="#/register">注册</a>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

<script>
        var login = {
            template: '<h1>登录组件</h1>'
        }
        var register = {
            template: '<h1>注册组件</h1>'
        }
        var routerObj = new VueRouter({
            routes: [
                { path: '/login', component: login },
                { path: '/register', component: register }
            ]
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router: routerObj 
        })
    </script>

三. router-link的使用

<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的<a>标签，可以通过配置tag属性生成别的标签。可以用来取代a标签，而且还可以通过to属性省略指向地址的#号。

    <div id="app">
        <!-- router-link 默认渲染为一个a标签 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>

具体参考地址：<router-link> Props

我们还可以给<router-link>添加样式，设置选中路由时的高亮。

1.router-link-active是设置链接激活时使用的 CSS 类名的一个默认值，可以直接通过其直接增加样式：

    <style>
        
        .router-link-active,
        .myactive {
            color: red;
            font-weight: 200;
            font-style: italic;
            font-size: 50px;
            text-decoration: underline;
            background-color: seagreen;
        }
    </style>

2.当然，默认值router-link-active也可以通过路由的构造选项 linkActiveClass 来修改，用作全局使用：

        var routerObj = new VueRouter({
            routes: [
                { path: '/', redirect: '/login' },
                { path: '/login', component: login },
                { path: '/register', component: register }
            ],
            /* 设置链接激活时使用的 CSS 类名。
            默认值可以通过路由的构造选项 linkActiveClass 来全局配置。 */
            linkActiveClass: 'myactive'
        })