VUE3 学习笔记(11):vue-router路由要懂的知识点

在前后端没有分离之前,大家通常采用的MVC模式,由后端通过Controller层实现页面跳转,VUE是组件化的特点,说白了就是一个单页面应用(挂载在public/index.html),意味着所有的页面只是各组件的组合。那么控制这些组合就无法通过传统方式进行控制了。

VUE 提供了路由配置vue-router进行处理,本文将着重介绍它的使用。

旧项目未配置vue-router

安装vue-router

Npm install --save vue-router

或者

Cnpm install --save vue-router

配置路由

ST1:创建路由文件

1.项目/src/router(创建)

2.项目/src/router/index.js(创建)

index.js

javascript 复制代码
import {createRouter,createWebHistory} from "vue-router";
//外部引用组件
import left from "@/components/left.vue";
const routes = [
    //动态引用组件(推荐)
    {
        path: '/',
        name: 'home',
        component: () => import('../components/main.vue')
    },
    //外部引用示例
    {
        path: '/left',
        name: 'left',
        component: left
    },
    {
        path: '/A',
        name: 'a',
        component: () => import('../components/A.vue')
    },
    {
        path: '/B',
        name: 'B',
        component: () => import('../components/B.vue')
    },
    {
        path: '/:pathMatch(.*)*',
        name: 'notfound',
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router;

ST2:启用路由

main.js

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import axios from "axios";
import router from "@/router/index.js";
const app=createApp(App).use(router)
app.config.globalProperties.$axios = axios;
app.mount('#app');

ST3:测试效果

app.vue

javascript 复制代码
<!--内容控制-->
<template>
  <RouterView></RouterView>
  <router-link to="/left">left</router-link>
  <br></br>
  <router-link to="/">home</router-link>
  <br></br>
  <router-link to="/A">A</router-link>
  <br></br>
  <router-link to="/B">B</router-link>
</template>
<!--JS 控制-->
<script>

export default {

}
</script>

新项目配置vue-router

St1:创建项目时选择Router

如下图所示

st2:配置路由路径

目录/router/index.js

javascript 复制代码
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

st3:测试效果

app.vue

javascript 复制代码
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    </br>
    <RouterLink to="/about">About</RouterLink>
  </nav>

  <RouterView />
</template>

总结:

1.路由配置推荐使用动态组件

2.使用router时使用<router-vier>标签作为路由显示 入口

3.<router link...>路由跳转配置

路由传值

单个路由不传值就没有多大意义,比如我们希望路由时把对应的值传过去。

ST1:配置路由传值

javascript 复制代码
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about/:num',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

ST2:带参数传值

javascript 复制代码
<template>

  <nav>
    <router-link to="/">首页</router-link>
    <router-link :to="{name:'about',params:{num:itemId}}"> 演示传参</router-link>
    <RouterLink :to="{name:'about',params:{num:itemId}}">演示传参2</RouterLink>
  </nav>

  <RouterView />
</template>

<script >

export default {
  data() {
    return {
      itemId: 999
    };
  }
}


</script>

ST3:引用并显示

javascript 复制代码
<template>
  <div class="about">
    <h1>This is an about page:{{$route.params.num}}</h1>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
<script >
</script>

效果

嵌套路由

说白了就是在路由中套路由

目录/src/router/index.js

javascript 复制代码
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about/:num',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
      children: [
          {
              path: 'us',
              name: 'us',
              component: () => import('../views/AbutUS.vue')
          },
          {
              path: 'HomeView',
              name: 'HomeView',
              component: () => import('../views/HomeView.vue')
          }
      ]
    }
  ]
})

export default router

示例

javascript 复制代码
<template>
  <div class="about">
    <h1>This is an about page:{{$route.params.num}}</h1>
    <router-link :to="{name:'us'}">我们</router-link>
    <RouterLink :to="{name:'HomeView'}">公司</RouterLink>
    <RouterView></RouterView>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
<script >
</script>
相关推荐
用户516816614584114 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦14 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He15 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ20 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊20 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码21 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼2 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing2 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化