路由路由示例replace属性不留history记录append属性追加基路径tag属性显示<li>first</li>

路由示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>

 <div id ="app">
     <router-link to="/first">first</router-link>
     <router-link to="/second">second</router-link>

     <router-view></router-view>
 </div>

<script>
    const first = {
        template:'<div>first</div>'
    }
    const second = {
        template:'<div>second</div>'
    }

   const router =  new VueRouter({
        routes:[
            {path:"/first", component:first},
            {path:"/second", component:second}
        ]
    })

    new Vue({
        el:"#app",
        router
    })
</script>
</html>

replace属性
不留history记录

 <router-link to="/first" replace>first</router-link>

append属性
追加基路径

<router-link to="/second" append>second</router-link>

tag属性

 <router-link to="/first" tag="li">first</router-link>

显示 < li>first< /li>

event属性
来控制触发导航的事件

<router-link to="/first" event = "mouseover">first</router-link>

active-class属性
触发导航时候的样式

<router-link to="/first" event = "mouseover" active-class="test">first</router-link>