vue路由

本文介绍了如何使用vue-cli初始化项目,并通过Vue Router实现页面路由跳转。在App.vue中设置路由链接,引入组件。在main.js中配置路由,并创建组件实例。分别创建了goods、ratings和seller三个组件,实现不同页面内容展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 vue-cli 全局安装
 命令行执行 : npm install -g vue-cli    // 加-g是安装到全局
安装完成以后 可以输入命令 :vue 回车,可以看到针对vue的命令行;

初始化项目
执行命令: vue init webpack demo(你新建的项目名称/文件名称)
执行之后将会 自动初始化一个文件夹 :demo

npm install //安装依赖

npm run dev



App.vue
<template>
<div id='app'>
<v-header></v-header>
<div class='tab'>
<div class='tab-item'>
<router-link to="/goods">商品</router-link>
</div>
<div class='tab-item'>
<router-link to="/ratings">评论</router-link>
</div>
<div class='tab-item'>
<router-link to="/seller">商家</router-link>
</div>
</div>
<div class='content'>
<router-view></router-view>
</div>
</div>
</template>

<script>
import header from './components/header/header.vue'
export default{
components:{
'v-header':header
}
}
</script>
<style>
.tab{
width:100%;
height:40px;
line-height:40px;
display:flex;
}
.tab .tab-item{
flex:1;
text-align:center;
}
</style>

main.js //定义路由

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router' //配置文件中为'vue-router
import goods from './components/goods/goods.vue'
import ratings from './components/ratings/ratings.vue'
import seller from './components/seller/seller.vue'
import VueResource from 'vue-resource'

Vue.use(VueRouter)

Vue.config.productionTip = false

const routes = [
{ path: '/goods', component:goods},
{ path: '/ratings', component:ratings},
{ path: '/seller', component:seller}
]

const router = new VueRouter({
routes // routes: routes 的简写
})

const app = new Vue({
el:'#app',
router,
components: { App },
template: '<App/>'
})


header.vue //公用组件
<template>
<div class='header'>
我是header
</div>
</template>

<script>
export default{}
</script>

<style>
.header{
width:100%;
height:60px;
line-height:60px;
font-size:18px;
text-align:center;
color:#999;
}
</style>


goods.vue
<template>
<div>I am goods</div>
</template>

<script>
export default{}
</script>

<style></style>

seller.vue
<template>
<div>I am seller</div>
</template>

<script>
export default{}
</script>

<style></style>

ratings.vue
<template>
<div>I am ratings</div>
</template>

<script>
export default{}
</script>

<style></style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值