本文实例为大家分享了Vue.js路由实现选项卡的具体代码，供大家参考，具体内容如下
需要实现下图效果，点击上方选项卡，切换到不同内容的组件：
事先准备好两个库文件（vue.js、vue-router.js），放到对应路径。
1.引入依赖库
[removed][removed]
[removed][removed]
2.组件创建
const Html = Vue.extend({
在本文中，我们将探讨如何使用Vue.js和Vue Router来实现一个简单的选项卡切换功能。Vue.js是一个流行的前端JavaScript框架，而Vue Router则是Vue生态中的官方路由管理器，它允许我们根据URL来展示不同的组件，从而实现单页应用（SPA）的导航。
确保你已经准备好了Vue.js和Vue Router的库文件，并将其正确引入到HTML文件中。在这个例子中，我们使用了以下的引入方式：
```html
<script src="vue.js" type="text/javascript" charset="GBK"></script>
<script src="vue-router.js" type="text/javascript" charset="GBK"></script>
```
接下来，我们需要创建一系列的Vue组件，每个组件代表选项卡中的一个内容。例如，我们有Html、Css、Vue1和Javascript四个组件，它们分别显示HTML、CSS、Vue.js和JavaScript的相关内容：
```javascript
const Html = Vue.extend({
template: '<div><h1>html</h1><p>{{msg}}</p></div>',
data: function() {
return { msg: 'This is the html vue-router.' }
}
});
const Css = Vue.extend({
template: '<div><h1>CSS</h1><p>{{msg}}</p></div>',
data() {
return { msg: 'This is the CSS vue-router.' }
}
});
// Vue1, Javascript components are defined similarly
```
然后，我们要创建Vue Router实例并定义路由映射。路由配置对象`routes`包含了各个组件对应的URL路径：
```javascript
const router = new VueRouter({
routes: [
{ path: '/html', component: Html },
{ path: '/css', component: Css },
{ path: '/vue', component: Vue1 },
{ path: '/javascript', component: Javascript },
{ path: '/', component: Html } // 默认路径
]
});
```
一旦路由设置完成，我们将Vue Router实例挂载到Vue根实例上：
```javascript
const vm = new Vue({
router: router
}).$mount('#app');
```
在HTML中，我们可以使用`<router-link>`组件创建链接，`to`属性指定目标路径。当用户点击这些链接时，Vue Router会根据`to`属性的值导航到相应的组件：
```html
<div id="app">
<div class="app-tit">
<router-link to="/html">html</router-link>
<router-link to="/css">css</router-link>
<router-link to="/vue">vue</router-link>
<router-link to="/javascript">javascript</router-link>
</div>
<div class="app-con">
<router-view></router-view>
</div>
</div>
```
我们为页面添加一些基本样式，使选项卡看起来更美观：
```css
body {
font-family: "Microsoft YaHei";
}
#app {
width: 600px;
margin: 0 auto;
}
.app-tit {
font-size: 0;
width: 600px;
}
.app-tit .router-link-active {
background: #09f;
color: #fff;
}
.app-tit a {
display: inline-block;
height: 40px;
line-height: 40px;
font-size: 16px;
width: 25%;
text-align: center;
background: #ccc;
color: #333;
text-decoration: none;
}
.app-con div {
border: 1px solid #ccc;
height: 400px;
padding-top: 20px;
}
```
这样，我们就创建了一个基于Vue.js和Vue Router的选项卡系统，用户可以通过点击不同的链接来查看相应内容的组件。Vue Router通过动态地替换`<router-view>`中的组件，实现了页面内容的无刷新切换，提高了用户体验。
