将html5项目改造成vue项目
也就是view层的vue文件:Index.vue
<template>i
<div>
将html代码粘贴到这里
</div>
</template>
<script>
export default {
name: 'Index',//注意这里就是Index.vue文件的名称
data() {
return {
}
},
methods: {
gotoTest(id) {
// this.$router.push() 表示路由调转
this.$router.push(`/test/${id}`)
}
},
mounted() {
},
components: {
}
}
</script>
<style lang="scss" scoped>
@import "../assets/css/amazeui.css";
@import "../assets/css/admin.css";
@import "../assets/css/demo.css";
@import "../assets/css/seastyle.css";
</style>
router层:
index.js
1.导入对应的包
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index'
import Test from '../views/Test'
import Search from '../views/Search'
import Introduction from '../views/Introduction'
2.使用路由
Vue.use(VueRouter)
3.页面的跳转与参数的传递
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: Index
},
{
path: '/test/:abc', // /test/45 /test/abc
props: true,
component: Test
},
{
path: '/search',
component: Search
},
{
path: '/intr',
component: Introduction
}
]
})
4.导出路由
export default router
实例:
<template>
<h1>Helle world, {{abc}}</h1>
</template>
<script>
export default {
props: {
//abc对应上面的 path: '/test/:abc',其实就是传递参数而已
abc: Number // String 地位上和data中的属性是一样的,在任何地方都可以使用 this.abc
},
data() {
return {
name: ''
}
},
name: "Test"
}
</script>
<style scoped>
</style>