Vue3.0极速入门 - 登录demo

Talk is cheap, Show the code

·
在完成npm和vue的环境安装，并了解了基本的目录和文件结构以后，直接写一个带登录和首页的demo做示例，快速了解一个vue工程的创建和基本的页面跳转

第一步创建工程

1、选择手动模式创建工程

npm create app-demo

2、添加router到工程中

第二步：创建登录页面

1、新建文件

2、文件代码

LoginByCode.vue

LoginByPwd.vue

LoginView.vue

3、效果图

第三步：修改路由

修改router/index.js文件

router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import LoginView from '../views/LoginView.vue'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    redirect: 'login'
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  {
    path: '/homePage',
    name: 'homePage',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

router.beforeEach((to,from,next)=>{
  const toPath = to.path;
  const fromPath = from.path;
  console.log(fromPath)
  console.log(toPath)
  next()
});

router.onError((err) => {
  console.log(err)
})


export default router

2、修改App.vue文件

App.vue

3、点击登录按钮后跳转到首页

Vue-Router是如何工作的

1、index.js的route定义是前提

const routes = [
    // 通过redirect实现重定向，可以在用户访问默认的url时跳转到指定的登录页面
  {
    path: '/',
    redirect: 'login'
  },
  // 通过component组件方式注册，path是路径，跳转时使用path跳转
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  // 通过chunk方式注册，可以实现延迟加载
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

// 创建route对象
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 通过export default 暴露router对象给外部使用
export default router

2、想要使用必须在main.js挂载

因为使用手动创建模式，vue-cli已经自动将router对象挂在到App对象

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

3、想要跳转必须在最外层的App.vue定义

router是一个栈结构，router-view相当于路由的rootview，必须预先放在最外层的div里，系统也会默认往router-view注入第一个栈顶vue页面

push、replace和go的使用区别

this.$router.push('/homePage')

往栈中压入homePage页面，浏览器历史增加一条浏览记录

this.$router.replace('/homePage')

用homePage替换栈顶的vue页面，浏览器历史不变

this.$router.go(-1)

推出一个栈顶元素，回到上一个页面