使用vue的router-link

<router-link>可以作为一种导航，会被渲染成<a>标签

<ul>

<li v-for="base in baseList" >
<router-link :to="base.Url">{{base.Name}}</router-link>
</li>

</ul>

会渲染成：

<ul>

<li><a href="#/baseone" class="">基础一</a></li>

<li><a href="#/basetwo" class="router-link-active">基础二</a></li>

<li><a href="#/basethree" class="">基础三</a></li>

<li><a href="#/basefour" class="">基础四</a></li>

<li><a href="#/basefive" class="">基础五</a></li>

</ul>

通过设置to属性指定目标地址，会控制<router-view></router-view>位置显示的内容。

需要设置如下：

组件

const baseone = require('./components/base/baseone.vue');

路由

const routes = [{path: '/baseone',component: baseone}];

router实例

const router = new VueRouter({ routes});