Vue Router

最新推荐文章于 2025-12-11 21:57:31 发布
转载 最新推荐文章于 2025-12-11 21:57:31 发布 · 71 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/wt7018/p/11506882.html
文章标签：

#javascript #ViewUI

官网的例子

https://router.vuejs.org/zh/guide/#html

一、简单的Vue Router

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <App />
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        const Foo = {
            data(){
                return {

                }
            },
            template: '<div>foo</div>' 
        }
        const Bar = {
            data(){
                return {
                    
                }
            },
            template: '<div>bar</div>' 
        }
        const router = new VueRouter({
            routes: [
                {path: '/foo', component: Foo},
                {path: '/bar', component: Bar}
            ]
        })
        // 注意：别忘记挂载
        let App = {
            router,
            data(){
                return {
                    msg:"测试",
                }
            },
            template: `
                <div>
                    <p>{{msg}}</p>
                    <p>
                        <router-link to="/foo">Go to Foo</router-link>
                        <router-link to="/bar">Go to Bar</router-link>    
                    </p>
                    <router-view></router-view>
                </div>
            `,

        }
        new Vue({
            el: "#app",
            data(){
                return{

                }
            },
            components:{
                App,
            }
        })
    </script>
</body>
</html>

 二、命名路由

注意：router-link 里的 to 要添加 v-bind，其它看官网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <App />
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        const Foo = {
            data(){
                return {

                }
            },
            template: '<div>foo</div>' 
        }
        const Bar = {
            data(){
                return {
                    
                }
            },
            template: '<div>bar</div>' 
        }
        const router = new VueRouter({
            routes: [
                {
                    path: '/foo',
                    name: 'foo', 
                    component: Foo
                },
                {
                    path: '/bar',
                    name: 'bar', 
                    component: Bar
                }
            ]
        })
        // 注意：别忘记挂载
        let App = {
            router,
            data(){
                return {
                    msg:"测试",
                }
            },
            // 注意： to前面添加 v-bind
            template: `
                <div>
                    <p>{{msg}}</p>
                    <p>
                        <router-link :to="{name: 'foo'}">Go to Foo</router-link>
                        <router-link :to="{name: 'bar'}">Go to Bar</router-link>    
                    </p>
                    <router-view></router-view>
                </div>
            `,

        }
        new Vue({
            el: "#app",
            data(){
                return{

                }
            },
            components:{
                App,
            }
        })
    </script>
</body>
</html>

三、重定向

1、重定向url

const router = new VueRouter({
    routes: [
        {
            path : '/',
            redirect: '/foo',
        },
        {
            path: '/foo',
            name: 'foo', 
            component: Foo
        },
        {
            path: '/bar',
            name: 'bar', 
            component: Bar
        }
    ]
})

2、重定向命名路由

const router = new VueRouter({
    routes: [
        {
            path : '/',
            redirect: {name: 'foo'},
        },
        {
            path: '/foo',
            name: 'foo', 
            component: Foo
        },
        {
            path: '/bar',
            name: 'bar', 
            component: Bar
        }
    ]
})

 四、动态路由匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <App />
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        const Foo = {
            data(){
                return {
                    uid: null,
                }
            },
            template: '<div>foo{{uid}}</div>',
            watch:{
                '$route' (to, from) {
                    // 对路由变化作出响应...发送ajax
                    console.log(to.params.id)
                    this.uid = to.params.id
                 }
            }
        }
        const router = new VueRouter({
            routes: [
                {
                    path: '/foo/:id',
                    name: 'foo', 
                    component: Foo
                }
            ]
        })
        // 注意：别忘记挂载
        let App = {
            router,
            data(){
                return {
                    msg:"测试",
                }
            },
            // 注意： to前面添加 v-bind
            // 关于参数的问题看官网的  命名路由
            template: `
                <div>
                    <p>{{msg}}</p>
                    <p>
                        <router-link :to="{name: 'foo', params:{id:1}}">Go to Foo 1</router-link>
                        <router-link :to="{name: 'foo', params:{id:2}}">Go to Foo 2</router-link>    
                    </p>
                    <router-view></router-view>
                </div>
            `
        }
        new Vue({
            el: "#app",
            data(){
                return{

                }
            },
            components:{
                App,
            }
        })
    </script>
</body>
</html>

 五、编程式导航

利用v-on 和函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <App />
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        const Foo = {
            data(){
                return {

                }
            }, 
            template: `
                <div>
                    <p>foo</p>
                    <button @click="clickHandler">跳转</button>    
                </div>
            `,
            methods:{
                clickHandler(){
                    router.push({ path: '/bar' })
                }
            } 
        }
        const Bar = {
            data(){
                return {

                }
            }, 
            template: '<div>bar</div>' 
        }
        const router = new VueRouter({
            routes: [
                { path: '/foo', component: Foo },
                { path: '/bar', component: Bar }
            ]
        })
        let App = {
            router,
            data(){
                return {
                    text: "测试",
                }
            },
            template: `
                <div>
                    <p>{{text}}</p>
                    <p>
                        <router-link to="/foo">Go to Foo</router-link>
                        <router-link to="/bar">Go to Bar</router-link>
                    </p> 
                    <router-view></router-view>
                </div>
            `,

        }
        new Vue({
            el: "#app",
            data(){
                return {

                }
            },
            components:{
                App,
            }
        })
    </script>
</body>
</html>

 六、带参数的查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <App></App>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        const Foo = {
            data(){
                return {}
            }, 
            template: '<div>foo</div>' 
            }
        const Bar = {
            data(){
                return {}
            }, 
            template: '<div>bar</div>' 
            }
        const router = new VueRouter({
            routes: [
                { 
                    path: '/foo', 
                    name: 'foo',
                    component: Foo 
                    },
                { 
                    path: '/bar',
                    name: 'bar', 
                    component: Bar 
                    }
            ]
        })
        let App = {
            router,
            data(){
                return {
                    msg: "测试"
                }
            },
            // query 带参数的查询 /bar?userid=2
            template: `
                <div>
                    <p>{{msg}}</p>
                    <p>
                        <router-link :to="{name: 'foo'}">Go to Foo</router-link>
                        <router-link :to="{name: 'bar', query: {userid:2}}">Go to Bar</router-link>
                    </p>
                        <router-view></router-view>
                </div>
            `,
        }
        new Vue({
            el: "#app",
            data(){
                return {

                }
            },
            components:{
                App,
            },
        })
    </script>
</body>
</html>

七、其它

1、获取 路由信息对象

created 方法中的 this.$route

2、获取 路由对象 VueRouter

created(){
    // 获取 路由信息对象
    console.log(this.$route);
    // 获取 路由对象 VueRouter
    console.log(this.$router);
}

3、去除url中的#

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

 

转载于:https://www.cnblogs.com/wt7018/p/11506882.html

anzhang5248
关注
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
04-03
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 是现代前端开发中一套流行的组合，用于构建高效、可维护的后台管理系统。这套模板利用了最新版本的技术栈，旨在提高开发效率并提供良好的用户体验。 首先，Vue3...
vue router路由嵌套不显示问题的解决方法
08-30
在Vue.js应用中，Vue Router是官方推荐的路由管理库，它允许我们通过URL来控制组件的切换，实现单页应用（SPA）的导航。在实际开发中，路由嵌套是一种常见且强大的功能，用于构建复杂的页面结构。然而，有时在配置...
3.1Vue Router
chxii的专栏
08-09 4355
是动态内容的占位符。在一级页面组件中使用，可以实现二级页面的嵌套显示。嵌套路由非常适合构建具有固定布局 + 可变内容的页面结构（如后台管理、文档网站等）。正确使用嵌套路由和，可以让项目结构更清晰、组件复用性更高、用户体验更流畅。💡 提示：你可以继续嵌套更多层级（三级、四级），但建议不要超过三层，以免结构过于复杂。
Vue路由：Vue router
m0_61619549的博客
09-11 1万+
Vue Router 是 Vue.js 的官方路由解决方案。它与 Vue.js 核心深度集成，让用 Vue 构建单页应用变得轻而易举。通过它，你可以轻松地管理应用中的页面跳转、路由守卫（如登录守卫），懒加载等功能。（注意：以下介绍以 Vue Router 4 为基础，相比于Vue Router 3 引入了一些新的特性和改进）Vue Router | Vue.js 的官方路由。
Vue router原理
日积月累的博客
03-28 4770
总结： vue-router是vue项目的重要组成部分，用于构建单页应用。单页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。路由的本质就是建立url和页面之间的映射关系 router 模式 hash / history hash模式是vue-router的默认模式。hash指的是url锚点，当锚点发生变化的时候，浏览器只会修改访问历史记录，不会访问服务器重新获取页面。因此可以监听描点值的变化，根据描点值渲染指定dom。 hash监听方法： window.addEventListene
【Vue实战教程】之 Vue Router 路由详解
柯晓楠
07-23 6049
用Vue.js创建的项目是单页面应用，如果想要在项目中模拟出来类似于页面跳转的效果，就要使用路由。其实，我们不能只从字面的意思来理解路由，从字面上来看，很容易把路由联想成“路由器”。路由器的功能用一句话来概括，就是连接两个或多个网络的硬件设备。我们所说的路由，是指在一个应用程序中链接多个页面（组件）的一种配置，在一个全栈项目中，路由分为前端路由和后端路由。后端路由先来看一下后端路由，例如项目的服务器地址是页面1，地址 http://192.168.1.10:8080/index.html。
Vue进阶——Vue Router（路由）
秋书一叶的博客
04-26 9166
Vue Router 是 Vue.js 官方提供的路由管理器。它和 Vue.js 核心深度集成，可以方便地在 Vue.js 应用中使用路由功能，支持基于 HTML5 History API 的单页应用 (SPA) 以及传统的多页应用程序 (MPA)。使用 Vue Router 可以实现在单页应用中切换页面而不刷新页面，同时还支持路由参数、路由组件、嵌套路由等高级功能，方便开发者构建复杂的前端应用。
一文详解:Vue3中使用Vue Router
热门推荐
九仞山的专栏
06-11 3万+
详细介绍了Vue3中使用Vue Router，从Vue Router的安装，基础知识到路由嵌套、路由守卫及路由懒加载等内容详细探讨了Vue Router的使用方法
【vue2】路由之 Vue Router
zhenshu_guo的博客
01-28 3442
vue2 使用 vue-router
Vue Router 动态路由
qq_40930841的博客
04-30 6404
动态路由是一种路径不固定的路由，路径中可变的部分被称为动态路径参数），使用动态路径参数可以提高路由规则的可复用性。在VueRouter的路由路径中，使用“参数名”的方式可以在路径中定义动态路径参数。:id', component: 组件 }]其中:id是动态路径参数，id为参数名。（注意：不同动态路径参数的动态路由在进行切换时，由于它们都是指向同一组件，所以Vue不会销毁再重新创建这个组件，而是复用这个组件。
Vue Router 嵌套路由
qq_40930841的博客
04-29 3013
父路由路径/子路由路径// router.js文件内容如下：// 导入组件// // 创建路由实例对象// // routes数组用于定义路由匹配规则// ]// })// // 导出路由实例对象//嵌套路由routes: [})// 导出路由实例对象。
VueRouter面试题汇总
m0_60632258的博客
03-13 3286
前端路由是在单页面应用的情况下，通过对每个视图展示形式匹配一个特殊的url来实现所谓的切换效果。不会重新向服务端发送请求，也不会跳转页面。无论是刷新、前进、还是后退，都可以通过特殊url实现。
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vuerouter切换时loading效果实现
08-10
import VueRouter from 'vue-router' import routes from './router' Vue.use(VueRouter) const router = new VueRouter({ // 路由配置... }) // 添加全局前置守卫 router.beforeEach((to, from, next) => { //...
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
08-28
vue router 嵌套路由在 history 模式下刷新无法渲染页面问题的解决方法 一、问题描述 ---------------- 在使用 vue router 嵌套路由时，我们可能会遇到一个问题，即在 history 模式下刷新页面时，嵌套路由页面无法...
javascript 性能优化实战：异步和延迟加载
小伙伴们全都Lucky！
12-11 443
本文探讨JavaScript性能优化中的异步加载与延迟加载技术。异步加载通过async/defer属性或动态创建script元素避免阻塞渲染；延迟加载则利用IntersectionObserver API按需加载非关键资源。二者结合可显著提升性能：异步加载核心脚本确保交互流畅，延迟加载减少初始请求量。实践表明，该方案能降低DOMContentLoaded时间30%以上，减少初始加载量90%，但需注意async脚本的执行顺序问题和延迟加载的回退处理。文中提供了完整的代码实现示例。
目前流行的前端框架
最新发布
zwh1zwh的博客
12-11 686
当前前端领域的技术选型非常丰富，不同的框架和工具各有侧重。为了让你快速建立一个整体印象，下面这个表格梳理了目前最主流的几个核心框架及其关键特性。框架名称核心特点学习曲线适用场景最新动态 (2025年)​- 基于组件和虚拟DOM- 灵活的JSX语法- 丰富的生态系统中等- 大型、复杂的单页应用(SPA)- 需要高度自定义和灵活性的项目- React 19 优化并发特性和服务器组件(RSC)- 与 Next.js 深度集成​- 渐进式框架，易于集成。
基于Java旅游信息推荐系统(源码+数据库+文档)
JIngJaneIL的博客
12-08 927
本文介绍了基于SpringBoot+Vue的旅游信息推荐系统和学生成绩管理系统开发项目。系统采用前后端分离架构，后端使用SpringBoot框架简化企业级开发，前端采用Vue.js实现响应式界面，数据库选用MySQL。文章详细说明了系统设计原则、技术选型理由，并提供了代码示例和测试案例。项目包含完整功能演示视频，所有源码经过验证可正常运行。同时提供最新计算机毕业设计选题参考，文末附有源码获取方式。系统适用于大学生项目实战开发，具有模块化设计、安全性强等特点。
第十篇：Day28-30 工程化优化与部署——从“能跑”到“好用”（对标职场“项目上线”需求）
2402_87628679的博客
12-11 377
gzip on;性能优化：掌握Vite的资源压缩、Tree Shaking、代码分割配置，能实现路由/组件懒加载、虚拟滚动等渲染优化，理解gzip/br压缩的原理和后端配置；兼容性处理：能通过`@vitejs/plugin-legacy`和autoprefixer适配低版本浏览器，理解`browserslist`的作用，知道Vue 3的兼容性限制；多环境配置：能创建多环境变量文件，在项目中使用`import.meta.env`访问环境变量，区分开发/测试/生产环境的配置；项目部署。
vuerouter
03-13
### Vue Router 使用指南 Vue Router 是官方的路由管理器，用于构建单页面应用程序 (SPA)[^1]。为了使 Vue 应用程序能够处理不同的 URL 并呈现相应的组件，需要安装并配置 Vue Router。 #### 安装与初始化 要使用 Vue Router，首先需通过 npm 或 yarn 安装它： ```bash npm install vue-router@next --save ``` 或者 ```bash yarn add vue-router@next ``` 接着，在项目中引入 `VueRouter` 和 `createRouter` 函数来创建路由器实例，并将其挂载到 Vue 实例上[^1]。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; import { createRouter, createWebHistory } from 'vue-router'; const app = createApp(App); app.use(createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'home', component: () => import('./components/Home.vue') }, // 更多路径... ] })); app.mount('#app'); ``` #### 嵌套路由设置 当遇到子级视图无法正常渲染的情况时，通常是因为父组件缺少 `<router-view>` 标签或是未正确定义嵌套结构。确保每个具有子路由的父组件都包含此标签以便加载对应的子组件。 ```html <template> <div class="parent"> <!-- 父组件内容 --> <router-view></router-view> <!-- 子组件会在这里被渲染 --> </div> </template> <script setup lang="ts"> // ... </script> ``` 对于更复杂的布局需求，可以定义多个命名视图，从而允许在同一级别下展示不同区域的内容。 #### 解决常见问题 如果发现路由变化后页面不更新，则可能是因为忘记了调用 `$forceUpdate()` 方法或存在缓存机制干扰；另外还需确认是否正确设置了动态参数匹配模式以及重定向逻辑等细节。 #### 配置懒加载 为了避免一次性加载过多资源影响性能，推荐采用按需加载的方式引入组件。上述例子中的 `component` 字段即展示了如何利用 ES6 的异步模块特性实现这一点。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值