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>
相关推荐
岁月宁静2 分钟前
AI聊天系统 实战:打造优雅的聊天记录复制与批量下载功能
前端·vue.js·人工智能
加洛斯1 小时前
Vue 知识篇(2):浅谈Vue中的DOM与VNode
前端·javascript·vue.js
Never_Satisfied2 小时前
在JavaScript中,map方法使用指南
前端·javascript·vue.js
一嘴一个橘子2 小时前
useTemplateRef Vue3.5
javascript·vue.js
PHP武器库2 小时前
从零到一:用 Vue 打造一个零依赖、插件化的 JS 库
前端·javascript·vue.js
excel3 小时前
深入理解 Slot(插槽)
前端·javascript·vue.js
工业互联网专业4 小时前
基于大数据的学习资源推送系统的设计与实现 _django
vue.js·python·django·毕业设计·源码·课程设计·学习资源推送系统
記億揺晃着的那天13 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
真的想不出名儿13 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
Queen_sy14 小时前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui