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导入路由:
    createRoutercreateWebHistory:确保你导入了 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"
      
      查询字符串传参
      路径传参
      
      动态传参--查询字符串传参
      动态传参--路径传参
      
      • 路径传参显示的不是别名,查询字符串是别名
  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
    
    

七、重定向

  • 父路由使用别的父路由

    {
    	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. 重定向可以重定向父路由

你可能感兴趣的:(前端,Vue,vue,前端)