1項目截圖
圖片.png
account.vue
login.vue
register.vue
<template>
<div>
<h1>這是Account組件</h1>
<router-link to="/account/login">登錄</router-link>
<router-link to="/account/register">注冊</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Account'
}
</script>
<style scoped>
</style>
<template>
<div>登錄</div>
</template>
<script>
export default {
name: "login"
}
</script>
<style scoped>
</style>
<template>
<div>注冊</div>
</template>
<script>
export default {
name: "login"
}
</script>
<style scoped>
</style>
2
index.js
App.vue
main.js
import Vue from 'vue'
import Router from 'vue-router'
import account from '@/components/Account'
import login from '@/components/login'
import register from '@/components/register'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{path: '/', name: 'HelloWorld', component: HelloWorld},
/* /!*{path:'/account',component:account,children:[
{path:'login',component:login},
]},*!/
{path:'/login',component:login},*/
{path:'/account',component:account,children:[
{path:'login',component:login},
{path:'register',component:register},
]},
]
})
app.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<h3>首頁</h3>
<router-link to="/account">account</router-link>
<router-view></router-view>
</div>
</template>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
圖片.png
圖片.png
