Vue前端篇(三)添加页面路由
把components重命名为views,在此目录下新建Login.vue、Home.vueLogin.vue<template><div class="page"><h2>Login Page</h2></div></template><script>export defa...
·
把components重命名为views,在此目录下新建Login.vue、Home.vue
Login.vue
<template>
<div class="page">
<h2>Login Page</h2>
</div>
</template>
<script>
export default {
name: 'Login'
}
</script>
Home.vue
<template>
<div class="page">
<h2>Home Page</h2>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
添加路由:在router下的index.js中配置Login和Home页面
index.js
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '../views/HelloWorld'
import Login from '../views/Login'
import Home from '../views/Home'
Vue.use(Router)
export default new Router({
routes: [
// {
// path: '/',
// name: 'HelloWorld',
// component: HelloWorld
// },
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/Login',
name: 'Login',
component: Login
}
]
})
分别访问http://localhost:8081/#/和http://localhost:8081/#/login
首页:http://localhost:8081/#/
登录页面:http://localhost:8081/#/login
我们把V这个logo给去掉:在App.vue中注释掉img
更多推荐
已为社区贡献5条内容
所有评论(0)