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>
相关推荐
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
落魄小二2 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js
十一吖i3 小时前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年3 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
熊的猫4 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
mosen8684 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~5 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
Gavin_9156 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
Devil枫12 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试