从0搭建Vue3-admin 笔记 理解router路由操作

终于理解vue3的路由关系了。这里描述一下我对router的理解。

 基础教程我是参照学习的2022版 | VUE3企业级实战【后台管理系统】已完结 | 项目教程详解 | 手把手实战解读 | 附源码/课件/笔记(VUE3/.NET6/前端)T0011_哔哩哔哩_bilibili

 router路由信息在每个页面里怎么获取？测试了三种方式。

方法1： 从'vue-router'获取，这个方法是Vue3推荐的。获取useRouter 里面是路由操作方法。在js里要转个名字，然后使用里面的.push方法跳转页面。方法必须要 return出去，页面才能用。主要。

<script>
import { useRouter } from 'vue-router'; //必须引入useRouter 方法
export default {
  name: "welcome",
  setup() {
    const $router = useRouter();  //相当于new一个$router路由
    //点击方法 
    function gohome(){
        $router.push({ path:'/Home'})  //Vue3语法中没有this
    }   

    return{
        //方法需要return出去，页面才能用
        gohome
    }
  }
};

</script>

方法2：这里的明显变化时路由信息是这样来的（import router from '../router/index';）然后直接就可以用了，感觉使用更简单。

<script>
import router from '../router/index';

export default {
  name: "login",

   setup() {

    console.log(router);
      //点击方法 
      function gohome(){
          router.push({ path:'/'})  //Vue3语法中没有this
      }   

      return{
          //方法需要return出去，页面才能用
          gohome

      }
    }
};
</script>

方法3：这里明显的地方是路由信息获取 （import router from '@/router';）更加简单。

这里还有一个tablist变量。可以看到数据的信息来源是router.options.routes[0].children。这什么意思？路由里的route表信息。看bibi视频里子路由那个视频里有介绍。

<script>

import router from '@/router';//引入router 路由表的方法，变量等
import { reactive } from 'vue'; //reactive是Vue3中提供实现响应式数据的方法

export default {
  name: "Home",
  setup() {
	let tablist= reactive(router.options.routes[0].children); //这样tablist具备页面和后台数据双向互动的功能。
    console.log(router.options.routes);
	console.log(router);

    //点击方法 
    function gologin(){
        router.push({ path:'/login'})  //Vue3语法中没有this
    }   

    return{
        //方法需要return出去，页面才能用
        gologin,
		tablist
    }
  }
};

tablist在网页里怎么用？（i in tablist）就这么简单。但其实要学习的内容涉及很多，首先照抄，我基本没有前端代码知识。

所有对这段代码的理解是去查V-for 方法，围绕（i）变量，获取里面的标签内容，然后渲染出来。标签在router文件夹的index里设置的。

<el-menu-item :route="i.path" v-for="i in tablist" :key="i.name" :index="i.name">
	<!--<el-icon><icon-menu /></el-icon>-->
	<span>{{i.meta.title}}</span>
</el-menu-item>

这是改过后的router文件夹下index的一段内容。看了可以对应上标签的内容。包含了主页HOME，子路由children[].

包换直接路由加载home页面，懒加载子路由页面方法。注意是meta标签，开始以为要安装vue-meta插件的，后来发现，就是个变量名，后面页面处理时根据内容进行屏蔽，中文等信息处理的。

​
import Home from "@/views/Home.vue"
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,  //直接加载主页
    meta:{            //这个meta不是Vue-meta插件里的，就是个变量。不需要安装Vue-meta
      isShow:false,
      title: "首页",
    },
    children: [
      {
        path: '/role',
        name: 'Role',
        component: () => import("@/views/Role.vue"),
        meta:{
          isShow:true,
          title: "角色管理",
        }
      },
    ]
  }
]

​