路由

二级路由

在一级路由的页面中使用 <router-view /> 表示页面一级路由时在此处切换页面（一般在 App.vue 中放置一级路由标签），类似的在需要一级路由对应的页面合适位置放置 <router-view />，切换二级路由时页面在此处切换。注意二级路由一级其对应的视图组件要体现在放置 <router-view /> 标签的一级路由页面的子路由上，如下面代码要在视图组件 layoutContainer.vue 中放置二级路由用到的标签 <router-view />

import { createRouter, createWebHistory } from 'vue-router'

/**
 * createWebHistory(import.meta.env.BASE_URL) 表示访问本项目视图组件时会自动携带的前缀
 * 例如原本默认 / ，那么 localhost/home,localhost/list
 * 如果 createWebHistory('/jd')，则访问 list 视图时：localhost/jd/list
 * 该特性可配合 nginx 做前端项目代理
 */
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path:'/login', component: () => import('@/views/login/loginPage.vue')},
    { 
      path:'/', // 跳转到主页时自动重定向到 ArticleManager
      component: () => import('@/views/layout/layoutContainer.vue'),
      redirect: '/article/manager',
      children: [
        {
          path:'/article/manager',
          component: () => import('@/views/article/ArticleManager.vue'),
        },
        {
          path:'/article/channel',
          component: () => import('@/views/article/ArticleChannel.vue'),
        },
        {
          path:'/user/profile',
          component: () => import('@/views/user/UserProfile.vue'),
        },
        {
          path:'/user/avatar',
          component: () => import('@/views/user/UserAvatar.vue'),
        },
        {
          path:'/user/Password',
          component: () => import('@/views/user/UserPassword.vue'),
        }
      ]
    },
  ],
})

export default router

标签

点击标签 <router-link to="/login">跳转到登录页面</router-link> 会跳转页面，下面是通过代码跳转页面

<template>
    <h1>我是 Welcome</h1>
     <el-button @click="toLogin">代码跳转</el-button>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const toLogin = () => {
    router.push('/login')
}
</script>

注意在业务组件中使用路由之前要在入口函数中导入 router

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router).mount('#app')

重定向

访问首页时候自动跳转到默认的页面展示

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path:'/login', component: () => import('@/views/login/loginPage.vue')},
    { 
      path:'/', // 跳转到主页时自动重定向到 ArticleManager
      component: () => import('@/views/layout/layoutContainer.vue'),
      redirect: '/article/manager'
    },
  ],
})