渲染Login组件并实现重定向
1.创建Login组件
在components中创建登录组件Login.vue
<template>
<div>登录组件</div>
</template>
<script>
export default {};
</script>
// 定义单文件组件必须设置scoped
<style lang="less" scoped>
</style>
2.设置Login组件路由,并实现重定向
给登录组件设置路由,因为登录页是首页,因此需要重定向首页内容为登录组件路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
Vue.use(VueRouter)
const routes = [{
path: '/',
redirect: '/login',
}, {
path: '/login',
component: Login
}]
const router = new VueRouter({
routes
})
export default router
其中重定向代码如下,将首页指向Login组件:
{
path: '/',
redirect: '/login',
}
3.使用路由
在App.vue中使用路由占位符引入路由。
<template>
<div id="app">
<!-- 路由占位符 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "app"
};
</script>
<style>
</style>
到这里,一个以登录页面为首页的网页就制作完成了。