vue路由实例(vue-router)(vue版本2.9.2)
来源:互联网 发布:阿里云cdn 价格 编辑:程序博客网 时间:2024/06/13 22:26
一、目录结构,效果图。
![](file:///C:/Users/吴为/AppData/Local/Temp/enhtmlclip/Image.png)
![](file:///C:/Users/吴为/AppData/Local/Temp/enhtmlclip/Image(1).png)
![](file:///C:/Users/吴为/AppData/Local/Temp/enhtmlclip/Image(2).png)
二、main.js。是程序入口文件
import Vue from 'vue'
import App from './App'
import router from './router'
// 注册一个组件
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
三、index.js
import Vue from 'vue'
import Router from 'vue-router'
import goods from '../components/goods.vue'
import lab from '../components/mylab.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/goods',
name: 'goods',
component: goods
},
{
path: '/lab',
component: lab
}
]
})
四、app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {}
}
</script>
<style>
</style>
五、mylab.vue
<template>
<div id="app">
<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>
</template>
<script>
export default {
name: 'mylab',
data () {
return {}
}
}
</script>
<style scoped>
.tab{
display: flex;
}
.tab-item{
flex: 1;
text-align: center;
}
</style>
六、goods.vue
<template>
<div>
<h1> 我是goods</h1>
<h1> 我是goods</h1>
</div>
</template>
<script>
export default {
name: 'goods',
data () {
return {}
}
}
</script>
<style scoped>
</style>
阅读全文
0 0
- vue路由实例(vue-router)(vue版本2.9.2)
- vue-router路由(一)
- vue 路由vue-router
- vue路由 vue-router
- Vue 路由 vue-router
- Vue路由(router)使用注意事项
- vue-router学习二(动态路由)
- vue学习(四) vue-loader vue-router vue-cli
- vue-router: 嵌套路由
- vue-router 路由
- vue-router: 嵌套路由
- vue-router路由
- vue-router 路由
- 前端路由 -- vue-router
- vue-router -- 嵌套路由
- Vue 路由(router)
- vue-router命名路由
- vue-router路由
- 回顾 | 一场人工智能的盛宴:蚂蚁金服@NIPS 2017
- HttpServletRequest获取请求
- 是否要采用 React Native
- postgresql 10 分区探密
- bzoj1176 [Balkan2007]Mokia(CDQ二维平面)
- vue路由实例(vue-router)(vue版本2.9.2)
- java导出excel,边查询边导出
- “地震局IT系统虚拟化平台项目”验收成功
- n&(1<<i)的含义
- Java抽象类使用方法
- laravel中报错:Syntax error or access violation: 1115 Unknown character set: 'utf8mb4'
- Quartus下FPGA固化(不包括软核)
- js控制checkbox选中状态,重复执行不生效
- spring 4.x 整合redis jar包冲突