用vue路由写一个登录的跳转页面功能

首先，在 Vue 项目中安装 Vue Router：

npm install vue-router --save

然后，在 `router` 目录下创建一个 `index.js` 文件，并编写路由配置代码：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    }
  ]
})

上面的代码中，我们定义了两个路由：一个是登录页 `/`，一个是主页 `/home`。这里的 `Login` 和 `Home` 是两个组件的名称。

接下来，在 `Login` 组件中，我们可以添加一个按钮，用来触发跳转：

<template>
  <div>
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    login () {
      this.$router.push('/home')
    }
  }
}
</script>

当用户点击登录按钮时，会触发 `login` 方法，该方法通过 `$router.push()` 函数跳转到主页。

最后，在 `App.vue` 中引入路由配置，并在模板中使用 `<router-view>` 标签来渲染路由组件：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import router from './router'

export default {
  name: 'App',
  router
}
</script>

这样，当用户访问网站时，会默认跳转到登录页，当用户成功登录后再跳转到主页。