Vue-Router/Vue组件

Vue-Router

一、安装

• npm install vue-router@3
• 确保安装 Vue Router 的版本与你的 Vue 版本兼容。例如，vue-router@4 是为 Vue 3 设计的，而 vue-router@3 是为 Vue 2 设计的。如果你使用 Vue 3，应安装 vue-router@4。

二、使用

1. 在router文件夹下新建index.js导入路由：
   createRouter 和 createWebHistory：确保你导入了 createWebHistory 函数，并且没有拼写错误。

   import { createRouter， createWebHistory } from 'vue-router'
   
   const routes = [
       {
           path: "/",  // 根路径
           components: () => import("../views/vouters/index.js")  //导入路径
       }
   ]
   
   const router = createRouter({
        history: createWebHistory(),  //也可以createWebHashHistory，会在根路径后加#，不用刷新，不需要服务器，即#后面的内容客户端自己处理，前面的由服务器响应
       routes /*导入的规则*/
   })
   
   export default router  //到处路由
   

2. 在main.js中注册

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

3. 在App.vue的templeate标签写写

• main.js是程序执行入口，在这里注册使用路由，全局可以访问。打开默认是使用的路由的根路径

三、配置路径别名@和vscode路径提示

1. 配置路径别名

   • vite.config.js

     import { defineConfig } from 'vite';
     import vue from '@vitejs/plugin-vue';
     import path from 'path';
     
     export default defineConfig({
       plugins: [vue()],
       resolve: {
         alias: {
           '@': path.resolve(__dirname, 'src')
         }
       }
     });
     

2. @vscode提示

   • 新建一个jsconfig.json文件，如果是ts就是tsconfig.json

     {
       "compilerOptions": {
         "baseUrl": ".",
         "paths": {
           "@/*": ["src/*"]
         }
       }
     }
     

四、使用查询字符串或路径传递参数

1. 查询字符串

   • 在路由定义的路径中最后加上?给上变量值，该路径的变量就会拿到该值

   <template>
     <div>
       id: {{ $route.query.id }}
     </div>
   </template>
   

2. 路径传递参数

   • 在路径定义后加入\分割找到了对应路径，:<变量名>代表传入参数， ？代表可以忽略

     const routes = [
       {
         path: "/user/:id/name/:name?",
         component: () => import("../views/User.vue")
       }
     ];
     

五、router-link、定义别名、定义路由名称、编程式导航

1. 别名

   • 定义别名是使用alias属性，也可以是数组

     path: "/content",
     alias: "test";
     

2. router-link

   • 进行路由的跳转

     path: "/user",
     name: "memnber"
     

     <router-link to="/content?id=100&title=test">查询字符串传参</router-link>
     <router-link to="/user/007/name/ha9">路径传参</router-link>
     
     <router-link :to="{path: '/content', $query:{id:100, title:test}}">动态传参--查询字符串传参</router-link>
     <router-link :to="{name: 'memnber', $param:{id:200, name:ha9}">动态传参--路径传参</router-link>
     

     • 路径传参显示的不是别名，查询字符串是别名

3. 编程式导航

   • 使用router.push

     import { userRouter } from 'vue-router'
     
     const router = useRouter()
     
     const goTo = () => {
     	router.push("<路径>")
     }
     

   • 编程式导航：就是不通过用户交互而进行链接跳转

六、嵌套路由共享组件

• 即路由底下还分为多个子路由，需要在父路由中添加

  {
    path: "/vip",
    component: () => import("../views/Vip.vue"),
    children: [
      {
        path: "",
        component: () => import("../views/Default.vue")  // 默认子路由,默认跳转到这个界面
      },
      {
        path: "order",
        component: () => import("../views/Order.vue")
      }
    ]
  }
  

  // vip.vue
  <template>
  	<router-view></router-view>
  </template>
  

七、重定向

• 父路由使用别的父路由

  {
  	path: "/vip",
      component: () => import("@/views/vip.vue"),
      children: [
          {
              path: "/vip",
  			component: () => import("@/views/default.vue"), //默认跳转到这个界面
          },
          {
              path: "/order",
  			component: () => import("@/views/order.vue"),
          }
              
      ]
  },
  {
  	path: "/svip",
  	redirect: {name:'member', params:{id:200, name:'ha9'}}  // 和编程式导航类似
  }
  

八、全局全置守卫

• 后端：前置中间件

  • 对特定路由进行拦截，一般不会在前端写拦截，因为浏览器控制台就可以注入js代码

    //  main.js
    router.beforeEach(to, from, next) => {
        console.log("to:", to)  //即将进入的路由信息
        console.log("from", from)  //当前即将离开的路由信息
        
        if (to.name == "history") {
            next(false)  // 对name==history的路由进行拦截
        }
        else {
            next(true)
        }
    }
    

Other

1. 路由控制：只有通过路由定义的路径才能访问，方便路径管理和访问控制。

2. 路由拦截：一般不会在前端写拦截，因为浏览器控制台就可以注入js代码

3. 根路径是直接默认访问的，可以通过重定向实现默认访问

   const routes = [
     {
       path: "/",
       component: () => import("@/layouts/MainLayout.vue"),
       children: [
         {
           path: "",
           redirect: "default" // 默认重定向到子路由
         },
         {
           path: "default",
           component: () => import("@/views/Default.vue")
         },
         // 其他子路由
       ]
     }
   ];
   
   const routes = [
     {
       path: "/",
       component: () => import("@/layouts/MainLayout.vue"),
       redirect: "default", // 默认重定向到子路由 default
       children: [
         {
           path: "default",
           component: () => import("@/views/lt.vue") // 这里是你的目标组件
         },
         // 其他子路由
       ]
     }
   ];
   

   重定向到子路由的路径是相对于父路由的路径，不需要前缀 /。

4. path路径都是相对父类到子类的，可以不重复写父类的路径

5. 重定向可以重定向父路由