Vue-router对于单页面应用程序来说，主要通过URL中的hash(#号)来实现笔筒页面之间的切换，同时hash有一

对于单页面应用程序来说，主要通过URL中的hash(#号)来实现笔筒页面之间的切换，同时hash有一个特点：HTTP请求中不包含hash相关的内容，所以，单页面程序中的页面跳转主要用hash实现。

Vue-router的基本使用

第一步：安装Vue-router包，并将其引用至当前页面中.

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

第二步：创建路由组件

var login={
template:"<h1>登录组件</h1>"
}
var register={
template="<h1>注册组件</h1>}

第三步：创建一个路由对象

var routerObj=new VueRouter({
    routes:[//路由匹配规则
        //每个路由规则都是一个对象
        {path:"/login",component:login},
        {path:"/register",component:register}
        //component属性必须对应的是一个组件模板对象
    ]
})

第四步：创建Vue实例

var app=new Vue({
    el:"#app",
    data:{},
    methods:{},
    router:routerObj//将路由规则，注册到app实例上，用来监听URL地址变化，然后展示对应的组件
})

第五步：在#app内创建(这是vue-router提供的元素，专门用来当作占位符)

<router-View></router-View>

下面是一个简单的应用实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
    <div id="app">
        <a href="#/login">login</a>
        <a href="#/register">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 app=new Vue({
            el:"#app",
            data:{
            },
            methods:{},
            router:routerObj,
            template:""
        })
    </script>
</body>
</html>

router-link

 <a href="#/login">login</a>
 <a href="#/registerregister">register</a>
 //将上面实例中的的代码改为下面的代码
 <router-link to="/login">login</router-link>
 <router-link to="/register">register</router-link>
 //默认渲染为<a>标签，若想指定渲染标签可以使用tag=""

redirect

{path:"/",redirect:"/login"}//用来定义默认展示的组件

设置选中路由高亮显示：

<style>
        .router-link-active{
            color: red;
            font-size: 20px;
        }
    </style>
    //其中router-link-active 为自动激活的类，可以通过路由的构造选项linkActiveClass来配置

设置简单的动画效果：

.v-enter-active,.v-leave-active{
            transition: all 1s ease;
        }
        .v-enter,.v-leave-to{
            transform: translateX(150px);
            opacity: 0;
        }
--------------------------------
 <transition mode="out-in">
             <router-View></router-View>
        </transition>

路由规则中定义参数

方法一：如果在路由中，使用查询字符串，给路由传递参数，则不需要修改路由规则。例如：

<router-link to="/login?id=10&name="张三">登录</router-link> 

this.$route.query.id
this.$route.query.id
//通过组件获取传入的id

方法二：通过修改路由规则

 <router-link to="/login/12/'李四'>login</router-link>
 
 {path:"/login/:id/:name",component:login}
 通过this.$route.params.id获取id

路由的嵌套

 var rout=new VueRouter({
            routes:[
                {path:"/account",
                component:account,
                children:[
                    {path:"login",component:login},
                ]
                },
            ]
        })
        //使用children属性，实现子路由时子路由的path不带'/'