vue.js之路由

最新推荐文章于 2024-11-08 16:09:18 发布
最新推荐文章于 2024-11-08 16:09:18 发布
阅读量72 收藏
点赞数
文章标签： javascript json 前端 ViewUI
原文链接：http://www.cnblogs.com/itrena/p/8352891.html
版权

Vue.js本身只提供数据与视图绑定及组件化等功能，如果想用它来开发一个完整的SPA（单页面应用），我们就还需要使用一些Vue.js的插件。今天我学习一种叫做Vue-router的插件，用来提供路由管理这个功能。

一、安装vue-router插件

　　1、安装bower：和npm类似的　

　　bower-> （前端）包管理器
　　npm install bower -g　　　　　　验证: bower --version

　　bower用法：

　　bower install <包名>　　　　　安装包　　　
　　bower uninstall <包名>　　　　卸载包
　　bower info <包名> 　　　　　   查看包版本信息

　　2、用bower安装vue和vue-router插件

　　　　bower install vue

　　　　bower install vue-router

二、路由的基本用法

　　　1、vue-router的基本作用就是将每个路径映射到对应的组件，并通过修改路由进行组件间的切换。

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由的基本用法</title>
　　<!--引入插件-->

    <script src="bower_components/vue/dist/vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="box">
    <ul>
        <!--跳转链接，使用v-link指令，path的值对应跳转的路径，即#！/home-->
        <li><a v-link="{path:'/home'}">主页</a></li>
        <li><a v-link="{path:'/news'}">新闻</a></li>
    </ul>
    <div>
        <router-view></router-view>
    </div>
</div>
<script>
    //1.准备一个根组件
    var App=Vue.extend();
    //2.准备Home News子组件
    var Home=Vue.extend({
        template:'<h3>我是主页</h3>'
    });
    var News=Vue.extend({
        template:'<h3>我是新闻</h3>'
    });
    //3.准备路由
    var router=new VueRouter();
    //4.关联
    router.map({
        'home':{
            component:Home
        },
        'news':{
            component:News
        }
    });
    //5.启动路由
    router.start(App,'#box')
</script>
</body>
</html>
复制代码

 

 运行结果：当点击“主页”的时候，出现“我是主页”当点击“新闻”的时候，出现“我是新闻”

　　　　　　

　　2、跳转：router.redirect()：设置路由

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由的基本用法</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.js"></script>
    <style>
    </style>
</head>
<body>
<div id="box">
    <ul>
        <!--跳转链接-->
        <li><a v-link="{path:'/home'}">主页</a></li>
        <li><a v-link="{path:'/news'}">新闻</a></li>
    </ul>
    <div>
        <router-view></router-view>
    </div>
</div>
<script>
    //1.准备一个根组件
    var App=Vue.extend();
    //2.Home News组件准备
    var Home=Vue.extend({
        template:'<h3>我是主页</h3>'
    });
    var News=Vue.extend({
        template:'<h3>我是新闻</h3>'
    });
    //3.准备路由
    var router=new VueRouter();
    //4.关联
    router.map({
        'home':{
            component:Home
        },
        'news':{
            component:News
        }
    });
    //5.启动路由
    router.start(App,'#box');
    //6.跳转
    router.redirect({　　　　
        '/':'home'
    });
</script>
</body>
</html>
复制代码

 

运行结果：

　　　　

三、嵌套路由

　　1、一般应用中的路由方式不会像上面的例子的那么简单，往往会出现二级导航这种情况。这种时候就需要使用嵌套路由这种写法、

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由的多层嵌套</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.js"></script>
    <style>
        .v-link-active{
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <!--跳转链接-->
        <li><a v-link="{path:'/home'}">主页</a></li>
        <li><a v-link="{path:'/news'}">新闻</a></li>
    </ul>
    <div>
        <router-view></router-view>
    </div>
</div>
<template id="home">
    <h1>我是主页</h1>
　　　<!--嵌套层-->
    <div>
        <a v-link="{path:'/home/login'}">登录</a>
        <a v-link="{path:'/home/reg'}">注册</a>
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
<template id="news">
    <h1>我是新闻</h1>
</template>
<script>
    //1.准备一个根组件
    var App=Vue.extend();
    //2.Home News组件准备
    var Home=Vue.extend({
        template:'#home'
    });
    var News=Vue.extend({
        template:'#news'
    });
    //3.准备路由
    var router=new VueRouter();
    //4.关联
    router.map({
        'home':{
            component:Home,
　　　　　　　　<!--嵌套路由-->
            subRoutes:{
                'login':{
                    component:{
                        template:'<strong>我是登录信息</strong>'
                    }
                },
                'reg':{
                    component:{
                        template:'<strong>我是注册信息</strong>'
                    }
                }
            }
        },
        'news':{
            component:News
        }
    });

    //5.启动路由
    router.start(App,'#box');
    //6.跳转
    router.redirect({
        '/':'home'
    });
</script>
</body>
</html>
复制代码

 

运行结果：

　　　　　

　　2、路由匹配：Vue-router在设置路由规则的时候，支持以冒号开头的动态片段

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由的多层嵌套</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.js"></script>
    <style>
        .v-link-active{
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <!--跳转链接-->
        <li><a v-link="{path:'/home'}">主页</a></li>
        <li><a v-link="{path:'/news'}">新闻</a></li>
    </ul>
    <div>
        <router-view></router-view>
    </div>
</div>
<template id="home">
    <h1>我是主页</h1>
    <div>
        <a v-link="{path:'/home/login'}">登录</a>
        <a v-link="{path:'/home/reg'}">注册</a>
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
<template id="news">
    <h1>我是新闻</h1>
    <div>
        <a v-link="{path:'/news/detail/001'}">新闻001</a>
        <a v-link="{path:'/news/detail/002'}">新闻002</a>
    </div>
        <router-view></router-view>
</template>
<template id="detail">
　　<!--获取路径上id的值-->
{{$route.params|json}}
</template>
<script>
    //1.准备一个根组件
    var App=Vue.extend();
    //2.Home News组件准备
    var Home=Vue.extend({
        template:'#home'
    });
    var News=Vue.extend({
        template:'#news'
    });
    var Detail=Vue.extend({
        template:'#detail'
    })
    //3.准备路由
    var router=new VueRouter();
    //4.关联
    router.map({
        'home':{
            component:Home,
            subRoutes:{
                'login':{
                    component:{
                        template:'<strong>我是登录信息</strong>'
                    }
                },
                'reg':{
                    component:{
                        template:'<strong>我是注册信息</strong>'
                    }
                }
            }
        },
        'news':{
            component:News,
　　　　　　　　<!--路由匹配-->
            subRoutes:{
                '/detail/:id':{
                    component:Detail
                }
            }
        }
    });

    //5.启动路由
    router.start(App,'#box');
    //6.跳转
    router.redirect({
        '/':'home'
    });
</script>
</body>
</html>
复制代码

 

运行结果：

　　　　　　

四、路由对象

　　在使用Vue-router启动应用时，每个匹配的组件实例都会被注入router的对象，称之为路由对象。在组件内部可以通过this.$route的方式进行调用。

　　路由对象有以下几个属性：

　　{$route.params | json}} -> 当前参数

　　{{$route.path}} -> 当前路径
　　{{$route.query | json}} -> 数据

　　示例：

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.js"></script>
    <style>
        .v-link-active{
            font-size: 20px;
            color: #f60;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li>
                <a v-link="{path:'/home'}">主页</a>
            </li>
            <li>
                <a v-link="{path:'/news'}">新闻</a>
            </li>
        </ul>
        <div>
            <router-view></router-view>
        </div>    
    </div>

    <template id="home">
        <h3>我是主页</h3>
        <div>
            <a v-link="{path:'/home/login'}">登录</a>
            <a v-link="{path:'/home/reg'}">注册</a>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </template>
    <template id="news">
        <h3>我是新闻</h3>
        <div>
            <a v-link="{path:'/news/detail/001'}">新闻001</a>
            <a v-link="{path:'/news/detail/002'}">新闻002</a>
        </div>
        <router-view></router-view>
    </template>
    <template id="detail">
　　　　　　<!--获取路由对象的属性 -->

      {{$route.params | json}}
        <br>
        {{$route.path}}
        <br>
        {{$route.query | json}}
    </template>
    <script>
        //1. 准备一个根组件
        var App=Vue.extend();

        //2. Home News组件都准备
        var Home=Vue.extend({
            template:'#home'
        });

        var News=Vue.extend({
            template:'#news'
        });

        var Detail=Vue.extend({
            template:'#detail'
        });

        //3. 准备路由
        var router=new VueRouter();

        //4. 关联
        router.map({
            'home':{
                component:Home,
                subRoutes:{
                    'login':{
                        component:{
                            template:'<strong>我是登录信息</strong>'
                        }
                    },
                    'reg':{
                        component:{
                            template:'<strong>我是注册信息</strong>'
                        }
                    }
                }
            },
            'news':{
                component:News,
                subRoutes:{
                    '/detail/:id':{
                        component:Detail
                    }
                }
            }
        });

        //5. 启动路由
        router.start(App,'#box');

        //6. 跳转
        router.redirect({
            '/':'home'
        });
    </script>
</body>
</html>
复制代码

 

运行结果：

　　　　

转载于:https://www.cnblogs.com/itrena/p/8352891.html

weixin_30535167
关注
Vue应用vue-router实现路由
qq_46149597的博客
11-07 1477
Vue的路由，路由基本语法、路由动态匹配、嵌套路由、命名路由、push()方法的应用、命名视图、路由重定向
vue前端面试刷题练习1 峰峰博客
热门推荐
程序员峰峰
03-15 1万+
一、选择题 1．在Vue实例中可以定义方法的是（ B ）选项。 A. el B. methods C. data D. computed 2．下列指令中，不能实现条件判断的是（ D ）。 A. v-if B. v-else C. v-show D. v-bind 3．下列代码的运行结果为（ B ） <div id="example"> <p>{{len}}</p> </div> <script type="text
路由 Vue-router 基本使用
weixin_51614564的博客
07-09 234
1.vue-router 是基于路由和组件的 ☑️ 路由用于设定访问路径，将路径和组件映射起来， ☑️ 在vue-router 的单页面应用中，页面的路径的改变就是组件的切换。2.如果想在当前页面使用路由1⃣️：安装Vue Router,在终端输入以下命令，点击回车 2⃣️：在到package.json 是否安装成功3⃣️： 新建一个router 文件，配置对应的路由与组件的映射关系 倒入对应的组件 配置对应的映射关系：创建一个数组，数组里面放上一个个映射的路由对象 4⃣️：
vue路由总结
qianduan2001_5的博客
05-25 94
前三种(url拼接传值,友好url传值,query对象传值)的方式,都会把数据拼接到url路径上,刷新页面不会丢失,但是由于url长度有限制(不同浏览器对url的长度限制不同),数据量不能太大。// < router - link :to = "'/main/'+msg" > 主页</router - link >// { path: "/main", component: MainCom,name:"吴亦凡"},// name:"吴亦凡",//命名路由可通过路由名跳转。
Vue.js的路由
2201_75502157的博客
01-02 792
在上面的示例中，我们定义了一个名为navigateToUser的方法，该方法使用$router.push方法导航到名为"user"的路由，并传递一个参数"id"。3. 在组件中访问路由参数：在你要使用路由参数的组件中，可以通过$route对象来访问路由参数。在Vue.js中，可以使用路由参数来传递数据。路由参数是一种特殊的数据，可以在路由配置中定义，并在组件中通过$route对象访问。创建路由配置：在你的Vue项目中，创建一个路由配置文件（例如router.js）来定义路由和路由参数。
vue.js和vue.min.js
06-13
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪（Evan You）开发，旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的，但它们在实际应用中...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
Vue.js前端开发实战-源代码.zip
07-07
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发并维护，以其易学易用、高性能、灵活的组件系统以及强大的生态系统而受到广大开发者喜爱。本资源"Vue.js前端开发实战-源代码.zip"是针对Vue.js的学习资料，...
Vue.js-3.0-Cookbook:Vue.js 3食谱，由Packt发行
05-26
Vue.js 3食谱 这是Packt发行的的代码存储库。 探索使用最新的Vue.js和TypeScript构建现代Web应用程序的可行解决方案 这本书是关于什么的？ Vue.js是一个渐进式Web框架，用于为Web应用程序构建专业的用户界面。 ...
11.Vue.js前端框架：vue-router路由
小白_xm
04-29 1190
1、常用插件有哪些 在利用 Vue.js 开发一个完整的单页 Web 应用时，还需要使用 Vue.js 提供的插件。Vue.js 比较常用的插件是 vue-router 和 axios。其中 vue-router 提供的是路由管理的功能，axios 提供的是数据请求的功能。 2、应用 vue-router 实现路由 2.1 vue-router 插件引入 vue-router 插件可以提供路由管理的功能。而在使用该插件之前需要在页面引入该插件，引用 vue-router 插件的方法主要有下列三种方式： v
vue点击按钮怎么跳转图片_vue-router组件里面点击一个按钮跳转到一个新的组件该怎么实现...
weixin_39636610的博客
12-19 1106
展开全部直接修改地址栏中的路由地址即可：{{msg}}var testLogin = Vue.component("login",{template:`这是我的登录页面`})var testRegister = Vue.component("register",{template:`这是我的注册页面`})//配置路由词典//对象数组const myRoutes =[//当路由地址：地址栏中的那个...
vue.js路由原理
喋喋的前端之路
09-16 462
更新视图但不重新请求页面vue-router是Vue.js框架的路由插件，它是通过mode这一参数控制路由的实现模式的，在创建VueRouter实例对象是，mode以构造参数的形式传入，传入string类型指示history的类别，可用SupportPushState判断浏览器是否支持‘history’模式，两种方法都是在浏览器环境下使用，若不在浏览器环境下需强制使用‘abstract’模式。 根据mode判断确定history实例的类并实例化对应关系为： history => HTML5Histoty h
vue2面试题5|[2024-11-08]
最新发布
m0_49474690的博客
11-08 292
关于vue2API的面试题
Echarts 折线图
weixin_44443380的博客
11-08 162
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
每天10个vue面试题(九)
不熬夜的臭宝的博客
11-08 414
一天10个vue面试题喽！
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 600
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
上门理发系统的搭建
app830的博客
11-07 342
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
深入浅出Vue.js及其路由管理工具vue-router
资源摘要信息:"Vue.js是一个轻量级的前端JavaScript框架，主要用于构建用户界面。它通过数据驱动和组件化的开发模式，使得前端开发更加简单高效。Vue.js的核心库只关注视图层，易于上手，同时它也能够轻松地和其他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值