简介

前端路由：
单页面应用程序员来说，主要通过URl中的hash（#/xxx）来实现不同页面之间的切换。同时，hash有一个特点：http请求中不会包含hash。相关内容；所以，单页面程序中的页面跳转主要用hash实现。

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

在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

路由的基本使用

1.引入路由模块

<script src="./lib/vue-router-3.0.1.js"></script>

2.创建路由对象

一个路径对应一个组件规则 ：

var router = new VueRouter({
    // routes: 配置路径和对应组件
    routes: [
        { 
            // 需要配置的路径：
            path: '/', 
            //配置路由单个组件
            component: loginCmp },
        { 
    })

一个路径对应多个组件规则 ：

var router = new VueRouter({
    // routes: 配置路径和对应组件
    routes: [
        { 
            // 需要配置的路径：
            path: '/', 
            // 配置路由 children ，配置 子路由（在父节点中配置 router-view 标签进行展示）
            children: [
                { path: 'login', component: login },
                // 子路由不要加'/'，否则永远都是以根路径开始
                { path: '/register', component: register }
            ]
        { 
    })

路径重定向：

var router = new VueRouter({
    // routes: 配置路径和对应组件
    routes: [
        { path: '/', redirect: '/login' },
        linkActiveClass: 'myactive'
    })

选中标签类名可以用 linkActiveClass 来修改。默认为 .router-link-active

var router = new VueRouter({
    routes: [
        { path: '/login', component: loginCmp },
        linkActiveClass: 'myactive'
    })

3.引用

使用 router-view 来在页面中展示 , 可以利用name来指定 components 内组件名字

<router-view name="default"></router-view>

在页面中用 router-link 或者 a 标签来定义跳转按钮

<router-link to="/register">注册1</router-link>
<a href="#/register">注册</a> 

4传参

可以直接在路由配置里面配 占位符加名称，进行传参
可以用组件内$route.params.来读取对于值

{ path: '/login/:id/:name', component: login },
//!!!!可以用组件内$route.params.来读取对于值
console.log(this.$route.params.id);

更多内容可以参考api https://router.vuejs.org/zh/