Vue Router介绍

最新推荐文章于 2023-12-27 11:40:39 发布
最新推荐文章于 2023-12-27 11:40:39 发布
阅读量165 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52629158/article/details/130899617
版权

它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

1.1.1 有哪些特性

  • 支持H5历史模式或者hash模式

  • 支持嵌套路由

  • 支持路由参数

  • 支持编程式路由

  • 支持命名路由

  • 支持路由导航守卫

  • 支持路由过渡动画特效

  • 支持路由懒加载

  • 支持路由滚动行为

1.1.2 使用步骤

1.导入js文件

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

如果 其他官网上提供的vue-router.js访问不了。我们现在 用npm下载

vue核心插件之一Vue Router路由模块

vue-router 路由插件是vue的核心插件

1.下载

npm install vue-router -S

npm install vue-router --save

我们推荐 使用本地下载好的vue.js和vue-router.js

<!-- 1.先引入vue -->
    <script src="./js/vue.js"></script>
    <!-- 2.再引入vue-router -->
    <script src="./js/vue-router.js"></script>

2.添加路由链接:<router-link>是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址

<!-- 通过router-link标签链接跳转，访问组件 -->
<router-link to="/login">登录</router-link>
<router-link to="/user">用户中心</router-link>

3.添加路由填充位（路由占位符）

<router-view></router-view>

4.定义路由组件

     // 定义组件
        // 登录组件
        let login = {
            template:`
            <div>
                <h1>我是登录页面</h1>
            </div>
            `
        }
        // 用户中心组件
        let user = {
            template:`
            <div>
                <h1>我是用户中心页面</h1>
            </div>
            `
        }

5.配置路由规则并创建路由实例

 // 配置路由规则并创建路由实例
        let myrouter = new VueRouter({
            // routes是路由规则数组
            //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
            //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
            routes:[
                {
                    path:'/login',
                    component:login
                },
                {
                    path:'/user',
                    component:user
                }
            ]
        })

6.将路由挂载到Vue实例中

   // 根组件
        // 将路由挂载到Vue实例中
        let vm = new Vue({
            el:'#app',
            data:{
    
            },
            //通过router属性挂载路由对象
            // router:router,
            // router,
            router:myrouter,
            methods:{
                
            },
            components:{
                login,
                user
            }
        })

案例效果图：

完整代码演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.先引入vue -->
    <script src="./js/vue.js"></script>
    <!-- 2.再引入vue-router -->
    <script src="./js/vue-router.js"></script>
</head>
<body>
    

    <div id="app">
        <!-- 通过router-link标签链接跳转，访问组件 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/user">用户中心</router-link>
        <router-view></router-view>
    </div>
    
    <script>
        // 特别注意：要先有组件，然后 我们才能 去配置 各个组件对应的路由规则
        // 定义组件
        // 登录组件
        let login = {
            template:`
            <div>
                <h1>我是登录页面</h1>
            </div>
            `
        }
        // 用户中心组件
        let user = {
            template:`
            <div>
                <h1>我是用户中心页面</h1>
            </div>
            `
        }

        // 配置路由规则并创建路由实例
        let myrouter = new VueRouter({
            // routes是路由规则数组
            //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
            //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
            routes:[
                {
                    path:'/login',
                    component:login
                },
                {
                    path:'/user',
                    component:user
                }
            ]
        })


        // 根组件
        // 将路由挂载到Vue实例中
        let vm = new Vue({
            el:'#app',
            data:{
    
            },
            //通过router属性挂载路由对象
            // router:router,
            // router,
            router:myrouter,
            methods:{
                
            },
            components:{
                login,
                user
            }
        })
    </script>
</body>
</html>

1.1.3 重定向

路由重定向：可以通过路由重定向为页面设置默认展示的组件

在路由规则中添加一条路由规则即可，如下：

        // 配置路由规则并创建路由实例
        let myrouter = new VueRouter({
            // routes是路由规则数组
            //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
            //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
            routes:[
                {
                    //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
                    path:'/',
                    redirect:'/login'
                },
                {
                    path:'/login',
                    component:login
                },
                {
                    path:'/user',
                    component:user
                }
            ]
        })

完整代码演示：

重定向是打开浏览器后会直接显示  默认展示的User组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.先引入vue -->
    <script src="./js/vue.js"></script>
    <!-- 2.再引入vue-router -->
    <script src="./js/vue-router.js"></script>
</head>
<body>
    

    <div id="app">
        <!-- 通过router-link标签链接跳转，访问组件 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/user">用户中心</router-link>
        <router-view></router-view>
    </div>
    
    <script>
        // 特别注意：要先有组件，然后 我们才能 去配置 各个组件对应的路由规则
        // 定义组件
        // 登录组件
        let login = {
            template:`
            <div>
                <h1>我是登录页面</h1>
            </div>
            `
        }
        // 用户中心组件
        let user = {
            template:`
            <div>
                <h1>我是用户中心页面</h1>
            </div>
            `
        }

        // 配置路由规则并创建路由实例
        let myrouter = new VueRouter({
            // routes是路由规则数组
            //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
            //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
            routes:[
                {
                    //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
                    path:'/',
                    redirect:'/login'
                },
                {
                    path:'/login',
                    component:login
                },
                {
                    path:'/user',
                    component:user
                }
            ]
        })

        // 根组件
        // 将路由挂载到Vue实例中
        let vm = new Vue({
            el:'#app',
            data:{
    
            },
            //通过router属性挂载路由对象
            // router:router,
            // router,
            router:myrouter,
            methods:{
                
            },
            components:{
                login,
                user
            }
        })
    </script>
</body>
</html>

1.4 嵌套路由

1.4.1 什么是嵌套路由

  1. 嵌套路由概念

    当我们使用 vue Router路由管理器，显示组件 ，并且 显示的组件中还有新的子级路由链接以及内容。

  2. 嵌套路由案例

    核心代码：

// 配置路由规则并创建路由实例
Vue.use(VueRouter);
let router = new VueRouter({
    // routes是路由规则数组
 routes:[
        // 每一个路由规则都是一个对象，对象中至少包含path和component两个属性
        {
            path:'/index',
            component:Index
        },
        {
            path:'/news',
            component:News,
            // 嵌套路由（子路由）
            // children数组 表示 子路由规则
            children:[
                {
                    path:'/news/one',
                    // path:'/news/one',
                    component:One
                },
                   {
                    path:'/news/two',
                    // path:'/news/two',
                       component:Two
                }
            ]
        }
    ]
})

完整代码演示：

 

 

 

 

 

 

 

 

 

 

 

 

 

仙鹤__
关注
前端开发：vue-router的使用以及两种模式的区别
软贱开发攻城狮
05-01 3456
前言 在前端开发中，使用Vue做项目的时候关于路由的管理处理是非常重要的知识点，路由的管理也是比较常用的，做前端开发的都知道SPA，通过唯一一个HTML页面完成所有组件的展示和切换，不同组件之间的切换需要通过路由来实现。vue-router是Vue的官方路由插件，为的就是Vue单页面开发的路由，处理页面跳转的，那么本篇博文就来分享一下关于vue-router相关的知识点，该知识点在前端求职面试中也是高频考察知识点，这里总结一下，方便查阅使用。 vue-router概念 　router的中文释...
router优点 vue_vue-router详解
weixin_35775446的博客
12-31 993
写在开头官网的vue-router文档写的很好，但是结构是扩散性的，主要是理论的讲解，想要边看边写一个例子对于初学者来说还是有一定难度，我这里主要是从例子出发，把理论贯穿到实例当中。一、基础知识介绍1、前端路由和后台路由的区别，以及优缺点。后端路由我们在浏览器输入一个url地址时，就会向后台服务器发送一个请求，服务器响应后，会返回一个html文件给前端显示，可以看出每一个url地址的切换就是对服务...
路由
m0_43400684的博客
12-17 255
路由（Router） 路由的默认路径 默认情况下，进入网站的首页，我们希望渲染首页的内容，所以在配置路由的时候，应该让路径默认跳转到首页 实现：只要多配置一个映射即可 const routes =[ { //重定向 path:'', redirect:'/home' }, { path:'/home', component: Home }, { path:'/about',
谈谈vue-router
m0_60334479的博客
09-09 219
vue-router是一个vue插件，用来提供路由功能。通过路由的改变可以动态加载组件，达到开发单页面程序的目的 1.基本使用 1)声明组件 let com1 = {} let com2 = {} let com3 = {} 2)声明路由器 let router = new VueRouter({ routes: [ { path: '/a', component: com1 }, { ...
【Vue篇】详解router路由 | element-ui组件 | 嵌套路由
小吉妙妙屋
12-27 2306
Vue Router是Vue.js官方提供的用于构建单页应用（SPA）的路由管理器。它能够集中处理应用程序中的路由跳转、参数传递、页面切换等功能，使得开发者可以轻松地实现前端路由功能。Vue Router具有以下特点：声明式路由配置：Vue Router使用声明式的方式配置路由，通过简单的配置项，可以定义页面路径、对应的组件以及其他相关信息。这种配置方式直观且易于维护。嵌套路由：Vue Router支持嵌套路由，即一个路由下面可以包含多个子路由，从而实现更复杂的页面结构和组织方式。
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
最新发布
04-03
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 是现代前端开发中一套流行的组合，用于构建高效、可维护的后台管理系统。这套模板利用了最新版本的技术栈，旨在提高开发效率并提供良好的用户体验。 首先，Vue3...
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+...
vue-router-tab:Vue.js tab 组件，基于 Vue Router
08-05
Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :check_mark_button: ...
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 中router-view不能渲染的解决方法
08-30
例如，在创建 VueRouter 实例时，需要使用 const router = new VueRouter({ routes: routes });，而不是 const router = new VueRouter({ routers: routers });。 此外，开发者还需要确保在 components 中正确地...
vue3路由属性和配置
m0_67388537的博客
07-25 1066
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。用户第一次访问网站页面(“/根目录”首页)时，地址栏里边没有“#锚点”的信息，也就没有对应的组件用于显示，用户体验不好，现在可以通过。实现一种效果，即当浏览器没有任何 #锚点信息时，默认也给显示一个组件。
22、路由的理解和配置
伦伦的博客
03-11 1676
概括： 多个路由，需要经过路由器的管理。为了完成单页面应用SPA(single page web application)的导航区和展示区来来回回的切换展示。 4.1、路由的理解： （1）路由就是一组key-value的对应关系。 （2）key为路径，value可能是function或component 4.2、路由分类 4.2.1 后端路由 （1）理解：value是function，用于处理客户端提交的请求。 （2）工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。 4
router优点 vue_VUE三 vue-router（路由）详解
weixin_29421565的博客
12-31 437
前端路由根据不同的 url 地址展示不同的内容或页面，无需依赖服务器根据不同URL进行页面展示操作优点用户体验好，不需要每次都从服务器全部获取，快速展现给用户缺点使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置一、路由(以user为例)userList-->用户列表页的路由所加载的代码(router-->...
vue路由的优点
weixin_44133711的博客
06-18 3756
router-link跳转 router-view进行渲染 this.$ router.push({path:"})js进行跳转 比如/user/:goodsid页面渲染的时候$route.params.goodsid 通过goods访问路由然后访问下面的两个子组件 如果一个页面下面有子路由就需要定义router-view定义载体进行渲染 ...
router优点 vue_vue-router 基础知识点总结
weixin_39716703的博客
12-22 908
功能vue-router实现vue的单页面应用，vue的官方路由器，与vue核心深度集成，使vue构建单页面程序变得轻而易举嵌套路由/视图映射模块化，基于组件的路由器配置路由参数，查询，通配符查看由vue过渡系统提供动力的过渡效果细粒度的导航控制与自动活动css类的链接HTML5历史纪录模式或哈希模式，在IE9中具有自动备用可自定义的滚动行为路由原理与传统开发方式的区别1 传统的开发方式，url改...
router优点 vue_Vue单页面应用，以及两种路由模式优缺点
weixin_40001634的博客
12-22 1728
优点: 良好的交互体验,用户不需要刷新页面,页面显示流畅, 良好的前后端工作分离模式,减轻服务器压力,缺点: 不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash模式，使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也就是单页应用了,当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且...
Vue.js介绍以及优缺点
热门推荐
汉堡请不要欺负面条
07-25 11万+
一.MVX框架模式了解 MVX框架模式：MVC+MVP+MVVM 1.MVC：Model(模型)+View(视图)+controller(控制器)，主要是基于分层的目的，让彼此的职责分开。       View通过Controller来和Model联系，Controller是View和Model的协调者，View和Model不直接联系，基本联系都是单向的。 用户User通过控制器Contr
vue-router的介绍
感恩、奋进、自信
03-31 2568
1、vue-router的作用与及定义vue-router可以通过html5的history API或者hash实现单页应用，即不刷新跳转，切换地址，只是页面上的组件的切换；vue-router可以实现页面间传参等其他功能；vue-router就是路由，用于页面跳转。当我点击页面上的home  按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容...
Vue-router
06-18 1106
Vue-router基础
Vue Router实现天猫底部导航
最后，通过`new VueRouter({ routes })`初始化路由器，并在主组件中使用`<router-view>`标签来渲染当前匹配的组件。 通过这种方式，我们可以实现类似天猫底部导航栏的功能，用户在点击不同的导航项时，页面内容会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值