vue路由tab栏切换

vue 专栏收录该内容
15 篇文章 0 订阅

需要用到的知识点:router router-link router-view components

app.vue

<template>
  <div>
  <router-link to="/logoin">登录</router-link>
  <router-link to="/header">首页</router-link>
  <router-view> </router-view>
  //路由占位符,
  </div>
</template>

header.vue

<template>
    <div>
        我是header页面
    </div>
</template>

logoin

<template>
    <div>
        我是logoin页面
    </div>
</template>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from "../components/HelloWorld"
import header from '../views/header.vue'
import logoin from '../views/logoin.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  {
    path: '/logoin',
    name: 'logoin',
    component: logoin
  },
  {
    path: '/header',
    name: 'header',
    component: header
  } 
]

const router = new VueRouter({
  routes
})

export default router

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值