vue路由配置

路由的配置

1.先安装npm install vue-router

路由文件

1.建立一个路由文件 在src/routers/index.ts

2.运用vue-router里面的createRouter，创建一个新的路由，并把这个路由暴露出去（export default）

// 通过vue-router实现路由
import { createRouter, createWebHashHistory } from 'vue-router'
import { constantRouter } from './routers'
// 创建路由器
let router = createRouter({
  // 路由模式hash
  history: createWebHashHistory(),
  routes: constantRouter,//路径的配置变量
  // 滚动行为
  scrollBehavior() {
    return {
      left: 0,
      top: 0,
    }
  },
})

export default router

关于一些路由配置的详情

在router文件中在新建一个router.ts用来存放上面的变量constantRouter

// 对外暴露配置路由
export const constantRouter = [
  {
    // 登录
    path: '/login',
    component: () => import('@/views/login/index.vue'),
    name: 'login',
  },
  {
    // home
    path: '/',
    component: () => import('@/views/home/index.vue'),
    name: 'layout',
  },
  {
    // 404
    path: '/404',
    component: () => import('@/views/404/index.vue'),
    name: '404',
  },
  {
    // 假设都没有匹配上，就走这个路由，报404
    path: '/:pathMatch(.*)*',
    redirect: '/404',
    name: 'Any',
  },
]

路由的滚动行为

1.在切换路由路径时，要保证界面在顶部和最左侧，达到一个刷新效果。

scrollBehavior() {
    return {
      left: 0,
      top: 0,
    }
  },

注册路由在main.ts下

// 注册路由
import router from './router'
app.use(router)

最后在app.vue中写入

<template>
  <div class="">
    <router-view></router-view>
  </div>
</template>