vue.js之路由

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/15fj/p/8321243.html

时间： 2024-08-30 14:12:06

vue.js之路由的相关文章

Vue.js的路由之——vue-router快速入门

直接先上效果图 这个单页面应用有两个路径:/home和/about,与这两个路径对应的是两个组件Home和About. 整个实现过程 JavaScript 创建组件:创建单页面应用需要渲染的组件 创建路由:创建VueRouter实例 映射路由:调用VueRouter实例的map方法 启动路由:调用VueRouter实例的start方法 HTML 使用v-link指令 使用<router-view>标签 router.redirect 应用在首次运行时右侧是一片空白,应用通常都会有一个首页,例如

vue 2.0 路由创建的详解过程

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script src="vue221.js"></script> 8 <script src="vue-router231.js&qu

vue.js路由

Vue.js 路由 Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA). Vue.js 路由需要载入 vue-router 库 中文文档地址:vue-router文档. 安装 1.直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js NPM 推荐使用淘宝镜像: cnpm install vue-route

vue.js路由参数简单实例讲解------简单易懂

vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数 接着给映射表中的路由设

Vue.js路由组件vue-router如何使用？

使用 Vue.js + vue-router 创建单页应用是非常简单的,只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可.本文和大家分享的就是vue-router的相关使用方法,希望对大家学习Vue.js有所帮助. 一 普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <titl

Vue.js—组件快速入门以及Vue路由实例应用

上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js的组件,组件其实就是页面组成的一部分,它是一个具有独立的逻辑和功能或页面,组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树,如下图: 接下来我们就仔细讲讲组件的使用吧. 1 全局组件 以下就是我们注册

Vue.js 相关知识（路由）

1. 简介 路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面. 2. 使用步骤 安装vue-router或者直接引入vue-router.js(下载地址:https://router.vuejs.org/) 例:SPA页面(Single Page Application,将一个网站的所有页面写在一个文件,通过不同的div进行区分,再通过div的显示.隐藏实现跳转效果) 定义组件对象(页面).组件模板.注册组件 定义

vue.js路由vue-router（一）——简单路由基础

前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义组件路由之间的跳转,还可以设置稍复杂的嵌套路由,创建真正的spa(单页面应用).我之前用vue-cli脚手架写了一个简单的人员管理实例,现在我们不用脚手架,就用原生的vue来写,本文也主要是通过实例来讲解vue.js+vue-router相关知识. 简单路由跳转实例 1.起步 下载vue-route

Vue.js路由管理器 Vue Router

起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>