先上代码:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
test.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)//这一句很容易忽略
import login from './login.vue'
import account from './main/account.vue'
import list from './main/list.vue'
let router = new VueRouter({
routes:[
{path:'/account',component:account},
{path:'/list',component:list}
]
})
let vm = new Vue({
el:'#app',
data:{
},
router,
render:c=>c(login)
})
login.vue
<template>
<div>
<h1>app组件</h1>
<router-link to='/account'>account</router-link>
<router-link to='/list'>list</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
account.vue
<template>
<div>
<p>注册组件regiest</p>
</div>
</template>
<script>
</script>
<style>
</style>
list.vue
<template>
<div>
<p>列表goodslist</p>
</div>
</template>
<script>
</script>
<style>
</style>