vue路由专题-用户管理案例

路由的主要知识点

1. 在vue中配置路由

//1.在router中的index.js中
import { createRouter, createWebHistory } from "vue-router";
import Login from '../views/MyLogin.vue'

const routes = [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login, name: 'login' },
]
const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;


//2.在main.js中
import router from "./router"
createApp(App).use(router).mount('#app')

2. 使用嵌套路由

//通过children属性进行路由嵌套，子路由的hash地址不要以 / 开头
//1.在Myside.vue中
<template>
 <div class="layout-aside-container">
   <!-- 左侧边栏列表 -->
   <ul class="user-select-none menu">
     <li class="menu-item">
       <router-link to="/home/users">用户管理</router-link>
     </li>
     <li class="menu-item">
       <router-link to="/home/rights">权限管理</router-link>
     </li>
     <li class="menu-item">
       <router-link to="/home/goods">商品管理</router-link>
     </li>
     <li class="menu-item">
       <router-link to="/home/orders">订单管理</router-link>
     </li>
     <li class="menu-item">
       <router-link to="/home/settings">系统设置</router-link>
     </li>
   </ul>
 </div>
</template>
//2.在router中的index.js中
{
       path: '/home',   
       redirect:"/home/users",     
       component: Home,
       name: 'home',
       children: [
           { path: 'users', component: Users },
           { path: 'rights', component: Rights },
           { path: 'goods', component: Goods },
           { path: 'orders', component: Orders },
           { path: 'settings', component: Settings },
           { path: 'users/:id', component: UserDetail,name:'UserDetail'},
         ],
   },
//3.由于在Home.vue中引入了Myside.vue，所以要加路由占位符
/*
希望把组件放到哪里进行展示，那么就在对应的区域放个路由占位符即可
<router-view></ router-view>
*/

<template>
 <div class="home-container">
   <!-- 头部组件 -->
   <my-header></my-header>

   <!-- 主体区域 -->
   <div class="home-main-box">

     <!-- 左侧边栏区域 -->
     <my-aside></my-aside>

     <!-- 右侧内容主体区域 -->
     <div class="home-main-body">        
       <!-- 为什么要路由占位符？因为头部区域和侧边栏中有路由跳转 -->
       <router-view></router-view>
     </div>
   </div>
 </div>
</template>

<script setup>
// 头部区域组件
import MyHeader from '../components/MyHeader.vue'
// 左侧边栏组件
import MyAside from '../components/MyAside.vue'
</script>

3. 实现动态路由匹配

//动态路由（路由传参）两种方法
//传递有两种方法：
//方法一：
<router-link :to="'/home/users/' + item.id">详情</router-link>
//方法二：
<router-link :to="{name:'UserDetail',params:{id:item.id}}">详情</router-link>

//接收有两种方法：
//方法一：采用useRoute
const route=useRoute();
route.params.id
//方法二：采用props:true
const props = defineProps({
 id: String,
});
props.id

4. 使用编程式导航

router.push、router.go(-1)

router.push();
//可以是哈希地址，也可以是带参数的
const gotoMovie = (id) => {   
 router.push({ name: 'Movie', params: { id: id} })
 //router.push(`/movie/${id}`)
 //router.push('/movie/'+id)
}

5. 使用全局导航守卫

// 全局路由导航守卫
router.beforeEach((to, from, next) => {
   // 判断用户访问的是否为登录页，若是，直接放行
   if (to.path === '/login') return next()
   // 获取 token 值
   const tokenStr = localStorage.getItem('token')
   //若Token不存在，强制跳到登录页
   if (!tokenStr) {
     next('/login')
   } 
   //存在token，直接放行
   else {
     next()
   }
 })