Vue3.0 路由

已于 2023-11-11 15:13:12 修改
阅读量216 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2023-11-05 14:59:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fanbin168/article/details/134227865
版权

简介

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

路由的基本使用

用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。

Unpkg.com 提供了基于 npm 的 CDN 链接。上述链接将始终指向 npm 上的最新版本。 你也可以通过像 https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js 这样的 URL 来使用特定的版本或 Tag。

安装 vue router

npm install vue-router@4
#或者
yarn add vue-router@4

使用案列

在项目中的src文件夹下面创建一个router的文件夹和一个views文件夹

在router文件夹下面创建一个index.js文件

在views文件夹下面创建一个Home.vue组件和一个List.vue组件

index.js文件内容：


import { createRouter,createWebHashHistory,createWebHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数
import Home from "../views/Home.vue" //导入Home组件
import List from "../views/List.vue"
 
const routes = [
    {
        path: "/",  //路径:        
        //component: List  //path路径所对应的组件
 
        //表示如果路径是/ 那么就跳转到/list路径，而/list路径对应的是List组件，所以就显示出List组件的内容了
        //举列：当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/#/list
        redirect:"/list" 
 
    },
    {
        path: "/home",  //路径
        component: Home //path路径所对应的组件：路径/ 和/home 都可以路由到Home组件
 
    },
    {
        path: "/list",  //路径
        component: List //path路径所对应的组件
    }
]
 
//创建路由对象
const router = createRouter({
    //history:createWebHashHistory()   这种方式是按照hash路由模式来路由导航，这种路由模式的url地址会存在 /#/ 样式是：http://localhost:5173/#/list
    history: createWebHistory(),     //这种方式基于浏览器 history API 的路由模式，url的样式是：http://localhost:5173/list
    routes, //routes:routes的缩写
 
})
 
export default router //导出router路由对象//导出router路由对象
 
 
// createWebHashHistory() 是 Vue Router 提供的一种基于浏览器 URL 的 hash 路由模式，它将路由添加到 URL 中的 hash 中
// 例如：/#/home、/#/about。这种模式可以避免服务器配置的问题，而且支持所有浏览器。
// 但是，由于 URL 中添加了 hash，因此在搜索引擎的 SEO 优化中存在一些问题。

 main.js文件内容

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

//import router from "../src/router" //导入路由js          注意：如果仅仅是指定了一个文件夹router，程序会自动去router文件夹下寻找index.js，并导入
//import router from "../src/router/index" //导入路由js    注意：.js可以省略
import router from "../src/router/index.js" //导入路由js 
//import router from "../src/router/myindex.js" //导入路由js  注意：如果我们的路由文件不是index.js 那么我们就得指定具体的名称了

var app=createApp(App)

app.use(router) //注册路由组件

app.mount("#app")

App.vue组件

<template>
  <div>
    {{ name }}
    <!-- <RouterView></RouterView> 是 Vue.js 框架中的一个组件，用于渲染与当前路由匹配的组件视图。当用户在应用中导航到不同的页面时，<RouterView> 组件会负责显示与当前路由对应的组件。 -->
    <!-- 举列：如果浏览器中输入：http://localhost:5173/#/list 这个路径对应的组件list就会插入到<RouterView></RouterView>中 -->
    <router-view></router-view> 
  </div>
</template>
<script setup>
import { ref, } from 'vue';

//导入模板即注册：注册的名字就是你导入用的名称Home
import Home from "./views/Home.vue" //导入Home组件:
import List from "./views/List.vue" //导入List组件:

const name = ref("李大锤");

</script>

Home.vue组件

<template>
    <div>Home</div>
</template>

List.vue组件

<template>
    <div>List</div>
</template>

路由的懒加载

懒加载的作用是：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行加载

用法：

component: () => import("../views/Home.vue")

案列

index.js路由文件

import { createRouter, createWebHashHistory,createWebHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数
//import Home from "../views/Home.vue" //异步加载的组件，这里不需要
//import List from "../views/List.vue" //异步加载的组件，这里不需要进行导入,所以要注释掉

const routes = [
    {
        path: "/",  //路径:        
        redirect: {
            name: "mylist" //重定向到路由名称为mylist的路由中，这样当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/list
        }

    },
    {
        path: "/home",  //路径
        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Home.vue")

    },
    {
        path: "/list",  //路径
        name: "mylist",  //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/List.vue")
    }
]

//创建路由对象
const router = createRouter({
    //history:createWebHashHistory()   这种方式是按照hash路由模式来路由导航，这种路由模式的url地址会存在 /#/ 样式是：http://localhost:5173/#/list
    history: createWebHistory(),     //这种方式基于浏览器 history API 的路由模式，url的样式是：http://localhost:5173/list
    routes, //routes:routes的缩写

})

export default router //导出router路由对象//导出router路由对象

路由别名的使用

在单页面应用中，网页具体路径显示是由vue-router配置中 path 决定的，path设置的是什么就显示什么，和name无关。

不同路由路径下页面渲染的内容，是根据component所对应的组件来进行渲染的，和name无关。

其实name就相当于给你的path取个别名，方便使用，路由并不是一定要设置name值。（如果不设置name，vue-router默认name值为 default）

index.js文件内容：

import { createRouter,createWebHashHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数
import Home from "../views/Home.vue" //导入Home组件
import List from "../views/List.vue"

const routes = [
    {
        path: "/",  //路径:        
        //component: Home  //path路径所对应的组件

        //表示如果路径是/ 那么就跳转到/list路径，而/list路径对应的是List组件，所以就显示出List组件的内容了
        //举列：当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/#/list
        //redirect:"/list" 

        //redirect:"/list" 这种重定向是使用的路径方式来重定向的。我们也可以通过路由的name来重定向，如下：
        redirect:{
            name:"mylist" //重定向到路由名称为mylist的路由中，这样当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/#/list
        }

    },
    {
        path: "/home",  //路径
        component: Home //path路径所对应的组件：路径/ 和/home 都可以路由到Home组件

    },
    {
        path: "/list",  //路径
        name:"mylist",  //路由名称，如果不指定name 默认的name为default
        component: List //path路径所对应的组件
    }
]

//创建路由对象
const router = createRouter({
    history: createWebHashHistory(),//按照hash路由模式来路由导航，这种模式的url地址会存在 /#/
    routes, //routes:routes的缩写

})

export default router //导出router路由对象//导出router路由对象

嵌套路由：子级路由

 就是父路由嵌套子路由.url 上就是/list 嵌套两个子路由后就是/list/lista 和/list/listb

就拿上面的使用案列来说：

路径组件
/listList        
/list/listaListA
/list/listbListB

 List.vue组件

<template>
    <div>
        <ul class="tabbar">
            <router-link custom to="/list/lista" v-slot="{ isActive, navigate }">
                <li :class="isActive ? 'aaa' : ''" @click="navigate">正在热映</li>
            </router-link>
            <router-link custom to="/list/listb" v-slot="{ isActive, navigate }">
                <li :class="isActive ? 'aaa' : ''" @click="navigate">即将上映</li>
            </router-link>
        </ul>
        <!-- <router-link to="/list/lista">正在热映</router-link>
        <router-link to="/list/listb">即将上映</router-link> -->
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
<script setup>
import ListA from './ListA.vue';
import ListB from './ListB.vue';

</script>
<style scoped>
ul {
    display: flex;
    position: fixed;
    /* bottom: 0; 元素在页面底部*/
    /* top: 0; 元素在页面顶部 */
    top: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    list-style-type: none;
    justify-content: space-between;

}

li {
    flex: 1;
    text-align:left;

}

.aaa {
    color: red;
}

div {
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    /* background: gray; */
}
</style>

ListA.vue组件

<template>
    <div>ListA</div>
</template>

ListB.vue组件

<template>
    <div>ListA</div>
</template>

index.js路由文件内容

import { createRouter, createWebHashHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数
import Home from "../views/Home.vue" //导入Home组件
import List from "../views/List.vue"
import ListA from "../views/ListA.vue"
import ListB from "../views/ListB.vue"

const routes = [
    {
        path: "/",  //路径:        
        //component: Home  //path路径所对应的组件

        //表示如果路径是/ 那么就跳转到/list路径，而/list路径对应的是List组件，所以就显示出List组件的内容了
        //举列：当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/#/list
        //redirect:"/list" 

        //redirect:"/list" 这种重定向是使用的路径方式来重定向的。我们也可以通过路由的name来重定向，如下：
        redirect: {
            name: "mylist" //重定向到路由名称为mylist的路由中，这样当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/#/list
        }

    },
    {
        path: "/home",  //路径
        component: Home //path路径所对应的组件：路径/ 和/home 都可以路由到Home组件

    },
    {
        path: "/list",    //路径
        name: "mylist",   //路由名称，如果不指定name 默认的name为default
        component: List,  //path路径所对应的组件
        children: [       //通过children配置子级路由
            {
                path: 'lista', //可以写成：'/list/lista' 但是不要写成 '/lista'
                component: ListA
            },
            {
                path: 'listb',//可以写成：'/list/listb' 但是不要写成 '/listb'
                component: ListB
            }
        ]
    }
]

//创建路由对象
const router = createRouter({
    history: createWebHashHistory(),//按照hash路由模式来路由导航，这种模式的url地址会存在 /#/
    routes, //routes:routes的缩写

})

export default router //导出router路由对象//导出router路由对象

路由案列+路由拦截

index.js路由

import { createRouter, createWebHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数

const routes = [
    {
        path: "/",  //路径: 
        redirect: "/Films"  //涉及到多级页面跳转需要用路径的跳转，不能用name的跳转; 浏览器进入http://localhost:5173/ 首先要跳转的路径是/Films，即：要跳转到http://localhost:5173/Films，而进入http://localhost:5173/Films后又发现/Films要重定向到/Films/NowPlaying，这样就实现了打开http://localhost:5173/就加载出来了http://localhost:5173/Films/NowPlaying内容
        // redirect: {
        //     name: "Films" //重定向到路由名称为Tabbar的路由中，这样当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/Films
        // }

    },
    {
        path: "/Navbar",  //路径：导航栏
        name: "Navbar",
        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Navbar.vue")

    },
    {
        path: "/FilmsDetail/:myid/:myname",  //路径：电影内容详细  "/FilmsDetail/:myid"的意思是：当路由以/FilmsDetail/为开头那么它后面的就是myid参数：举列：http://localhost:5173/FilmsDetail/123  那么这个123就是myid参数； 如果存在两个参数呢？"/FilmsDetail/:myid/:myname"  举列：http://localhost:5173/FilmsDetail/123/lily 那么这个123就是myid参数，lily就是myname参数
        name: "FilmsDetail",  //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/FilmsDetail.vue")
    },
    {
        path: "/Tabbar",  //路径：底部选项卡
        name: "Tabbar",  //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Tabbar.vue"),

    },
    {
        path: "/Films",  //路径:电影
        name: "Films",  //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Films.vue"),
        children: [       //通过children配置子级路由
            {
                path: 'NowPlaying', //可以写成：'/Films/NowPlaying' 但是不要写成 '/NowPlaying'(正在热映)
                name: "NowPlaying",
                component: () => import("../views/NowPlaying.vue")
            },
            {
                path: 'ComingSoon', //可以写成：'/Films/ComingSoon' 但是不要写成 '/ComingSoon'(即将上映)
                component: () => import("../views/ComingSoon.vue")
            },
            {
                //为什么在子路由中添加一个Films路由？：答：因为在进入Films组件后就需要立即加载NowPlaying组件的内容。:注意：这里需要加斜杆/Films  ；
                //从app.vue组件中进入Films组件的时候，跳转的地址是：http://localhost:5173/Films，这时候就找到了顶级路由/Films，到然进入子级路由children，发现了后/Films需要跳转到/Films/NowPlaying
                path: '/Films',
                redirect: "/Films/NowPlaying"
            },

        ]
    },
    {
        path: "/Cinemas",  //路径:影院
        name: "Cinemas",   //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Cinemas.vue")
    },
    {
        path: "/Home",  //路径:我的
        name: "Home",   //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Home.vue"),
        meta: //加一个自定义参数：里面的参数随便我们定
        {
            requireAuth: true,   // 对当前路由路径做一个标记，代表进入这个页面需要登陆才能进。用于在router.beforeEach里面做登陆验证的时候，判断这个requireAuth参数是否为true，为true则需要登陆才能进入
            aaa: "wowow"
        }
    },
    {
        path: "/Login",  //登陆
        name: "Login",   //路由名称，如果不指定name 默认的name为default
        component: () => import("../views/Login.vue"),
    },
    {
        path: "/:pathMatch(.*)",  //404错误
        name: "NotFound",  //路由名称，如果不指定name 默认的name为default
        component: () => import("../views/NotFound.vue")
    }

]

//创建路由对象
const router = createRouter({
    history: createWebHistory(),     //这种方式基于浏览器 history API 的路由模式，url的样式是：http://localhost:5173/list
    routes: routes,
})

//路由全局拦截：在进入页面之前就进行拦截。可以用于做用户登陆验证
//参数to：  表示即将进入的目标路由对象
//参数from：表示当前导航正要离开的路由
//参数next：调用该方法后才能进入下一个钩子。next() 直接进入下一个钩子,next(false) 中断当前的导航。next('/') 或者 next({ path: '/' }) 则会进入一个不同的地址。
router.beforeEach(async (to, from, next) => {
    const isAuthenticated = await localStorage.getItem('token');

    console.log(to.fullPath); //全路径
    console.log(to.path);     //路径
    console.log(to.name);     //路由名称
    console.log(to.params);   //路由参数：http://localhost:5173/FilmsDetail/123
    console.log(to.query);    //路由参数：http://localhost:5173/FilmsDetail?myid=123
    console.log(to.meta);     //路由自定义参数


    //meta.requireAuth表示当前请求的页面需要验证, 并且未登录
    if (to.meta.requireAuth && !isAuthenticated) {
        next(`/login?redirect=${to.path}`) //to.fullPath
    }
    else next() //如果不是请求的登陆界面，或者已经登陆过了，则直接跳转到用户请求的界面
})

//路由全局拦截：在进入页面之后才进行触发拦截。
router.afterEach(async (to, form) => {
    //用的比较少，一般用于收集一些日志信息,做用户行为分析:例如：收集页面浏览量:PV
})

export default router //导出router路由对象//导出router路由对象

无盐海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue 3.0 路由
Grapelet123的博客
02-17 1881
一、路由概念和原理 后端路由:请求方式、请求地址与 function 处理函数之间的对应关系 const express = require('express') const router = express.Router() router.get('/userlist',function(req,res){/*路由处理函数*/}) router.post('/adduser',function(req,res){/*路由处理函数*/}) module.exports = router 前端路.
Vue3.0路由
ButOff的博客
03-04 1446
入门 用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。下面是一个基本的例子： HTML <script src="https://unpkg.com/vue@3"></script> <script src="https://unpkg.com/vue-router@4"><
vue3.0-路由
qq_52822043的博客
04-26 2149
1. 前端路由的概念与原理 1）什么是路由 路由（router）就是对应关系。路由分为两大类： 后端路由 前端路由 2）后端路由 后端路由指的是：请求方式、请求地址与function处理函数之间的对应关系。 在node.js中，express路由的基本用法如下： 3）SPA与前端路由 SPA指的是一个web网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。 即在SPA项目中，不同功能之间的切换，要依...
Vue-3.0路由
weixin_46479909的博客
10-14 870
生活中的路由：设备和ip的映射关系路由就是一种映射关系Vue中路由：路径和组件的映射关系，根据路由就能知道不同路径的，应该匹配渲染哪个组件VueRouter的介绍作用：修改地址栏路径时，切换显示匹配的组件说明：Vue官方的一个路由插件，是一个第三方包官网：https://v3.router.vuejs.org/zh/VueRouter的使用（5+2）5个基础步骤（固定）1）下载：下载VueRouter模块到当前工程，版本3.6.5在终端中输入2）引入3）安装注册4）创建路由对象。
vue3.0 项目使用 路由
chuxindddd的博客
12-28 463
vue3.0 安装vue-router
Vue3.0配置多页面应用
03-17
Vue3.0是一个备受瞩目的前端框架更新，它引入了许多...总的来说，Vue3.0配置多页面应用是一个涉及项目结构、配置、路由和资源管理的综合过程。合理规划和配置，能够帮助开发者构建出结构清晰、易于维护的大型Web应用。
VUE3.0实现导航守卫模式的个人登录界面
01-26
在Vue.js框架中，Vue3.0引入了许多新特性，为开发者提供了更加高效和灵活的开发体验。在本文中，我们将深入探讨如何在Vue3.0中实现导航守卫模式来构建一个个人登录界面，同时利用`vue-router`、`vuex`以及`element-...
vue3.0+element-plus实现国际化语言，动态路由菜单demo
01-27
在本项目中，"vue3.0+element-plus实现国际化语言，动态路由菜单demo"，开发者采用最新的Vue.js 3.0框架与Element Plus UI库，构建了一个具有国际化功能和动态路由菜单的示例应用。这个项目对于学习Vue 3的新特性...
配置一个vue3.0项目的完整步骤
11-28
Vue 3.0 项目配置是一个前端开发者的基本技能，它涉及到多个步骤和技术栈。下面将详细解释如何配置一个基于 Vue 3.0 的图书管理项目。 1. **初始化项目** - 全局安装 `vue-cli`：Vue CLI 是 Vue 官方提供的脚手架...
vue-router3.0.1.js.zip
08-04
这是Vue框架的已经js库，现在在网上比较难找到，在这里分享给大家使用。。
VUE3.0脚手架构建的VUE3.0前端初始工程，包含router路由
01-21
VUE3.0脚手架构建的VUE3.0前端初始工程，包含router路由
vue3.0 上手体验
10-14
路由配置在Vue3.0中也有所改变，使用了`createRouter`和`createWebHistory`函数，如在`src/router/index.js`中的示例所示。这使得路由管理更加模块化和易于理解。 Vue3.0还引入了Composition API，它允许开发者按需...
vue3.0(十六)路由vue-router
最新发布
chengcheng9876的博客
07-03 759
路由vue-router
Vue3.0 路由的概念，
Czy010506的博客
11-20 188
vue.js
三、vue3.0之路由(vue-router)配置及语法
热门推荐
张先森的博客
05-27 1万+
vue3.0的路由(vue-router)
vue3.0中路由跳转,v-model的使用
浩星
03-01 1807
前言： vue3.0中实现路由的跳转，3.0的用法和2.0不一样，2.0中直接this.$router.push就可以使用了，3.0中比如引入配置， vue3.0中的v-model页面绑定数据，页面上使用方法跟以前一样，还是{{内容}}，但是方法和字段定义却不是在，data和methods里面了，是放在setup这个阶段，通过定义字段和方法，然后发送出来 路由跳转相关： <el-button @click="changeLink">切换到page1</el...
纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用
weixin_34019929的博客
09-20 136
vue3.0 CLI 真小白一步一步入手全教程系列：https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识，肢解重组成为可以堆砌的知识。 学会工具并不难，思考如何运用这些工具，才是编程或者工作中最难的部分。 我的 github 地址 -vue3.0Study- 阶段学习成果都会建立分支。 =================...
Vue-router的使用(vue3.0版本)
猫与故巷的博客
08-23 6432
vue-router 使用过程一级目录二级目录三级目录 一级目录 vue-router有三个概念 route, routes, router。 1， route，一条路由，它是单数，点击内容后跳转到指定内容，index按钮 => index内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。 2， routes ，一组路由，所有路由组合形成的一个数组。 [ {home 按钮 =>home内容 }， { about按钮 => about 内容}
vue3.0动态路由
09-19
Vue 3.0引入了一种新的动态路由配置方式，使得路由的配置更加灵活和动态化。在Vue 3.0中，可以使用函数形式来定义路由配置，这个函数被称为动态路由。 动态路由的定义方式类似于普通路由的定义，但是在定义每一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值