Vue学习笔记02——Vue路由

最新推荐文章于 2024-05-08 10:14:56 发布

小C好好干饭

最新推荐文章于 2024-05-08 10:14:56 发布

阅读量429

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44408913/article/details/118598635

版权

Vue 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

Vue学习笔记01——Vue开发基础

一、初识路由

1.路由的作用

Vue的路由是前端路由，可以让组件之间互相切换。

2.vue-router.js文件

Vue的路由使用需要引入vue-router.js文件，且引入是有顺序的。vue.js需要在vue-router.js前面

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>

二、vue-router

在实现单页面前端路由时，提供了两种方式，分别是hash模式和history模式，根据mode参数来决定采用哪一种方式。

1.hash模式

vue-router默认为hash模式，使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。#就是hash符号，中文命名为哈希符或者锚点，在hash符号后的值称为hash值。

2.history模式

hash模式的URL中会自带#号，影响URL的美观，而history模式不会出现#号，这种模式充分利用了history。pushState()来完成URL的跳转，而且无需重新加载页面。

使用history模式时，需要在路由规则配置中增加mode:‘history’，示例代码如下：

// mian.js文件
const router = new VueRouter({
    mode:'history',
    routes:[...]
})

3.vue-router的基本使用

我们需要了解三个基本概念：route，routes，router具体含义。

route:表示它是一个路由，单数形式。绑定一个路由组件
routes:表示一个路由组（常用），把route的每一条路由组合起来，形成一个数组。
router:它是一个机制，充当管理路由的管理角色。因为routes只是定义了一组路由，而这组路由该干什么就由router来指定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单页面路由</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <p>
        <!--使用router-link组件来组织导航-->
        <!--通过传入的to属性指定连接-->
        <!--router-link默认会被渲染成超链接标签-->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!--路由出口，路由匹配到的组件会渲染到这个位置-->
    <router-view></router-view>
</div>
<script>
    // 1.定义路由组件
    const Foo = {'template': '<div>foo</div>'};
    const Bar = {'template': '<div>bar</div>'};
    // 2.定义路由组
    // 每一个路由必须映射一个组件
    const routes = [
        {path: '/foo', component: Foo},
        {path: '/bar', component: Bar},
    ];
    // 3.创建router实例，传入配置（routes）配置
    const router = new VueRouter({
        routes: routes //可以直接缩写为routes
    });
    // 4.创建和挂载根实例
    const vm = new Vue({
        router
    }).$mount('#app');
</script>
</body>
</html>

3.1 案例：登录注册组件切换

<div id="app">
    <!--tag当前的导航显示出来的HTML标签-->
    <router-link to="/login" tag="button">前往登录</router-link>
    <router-link to="/register" tag="button">前往注册</router-link>

    <router-view></router-view>
</div>
<template id="login">
    <div class="bg-secondary w-50 p-5">
        <h3 class="mt-2 text-center">登录页面</h3>
        <input placeholder="请输入用户名" class="form-control mt-2"/>
        <input placeholder="请输入密码" class="form-control mt-2"/>
        <div class="text-center">
            <button class="btn btn-danger mt-2">登录</button>
        </div>
    </div>
</template>
<template id="register">
    <div class="bg-secondary w-50 p-5">
        <h3 class="mt-2 text-center">注册页面</h3>
        <input placeholder="请输入用户名" class="form-control mt-2"/>
        <input placeholder="请输入密码" class="form-control mt-2"/>
        <input placeholder="请确认密码" class="form-control mt-2"/>
        <div class="text-center">
            <button class="btn btn-danger mt-2">注册</button>
        </div>
    </div>
</template>
<script>
    const router_login = {'template': '#login'};
    const router_register = {'template': '#register'};
    // 创建路由组
    const routes = [
        //id 绑定 组件
        {path: '/login', component: router_login},
        {path: '/register', component: router_register}
    ];
    // 创建VueRouter实例 绑定 routes组
    const router = new VueRouter({routes: routes});
    const vm = new Vue({
        router: router
    }).$mount('#app');
</script>

三.嵌套路由

是否是嵌套路由主要是由页面结构来决定的，实际项目中的应用界面，通常由多层嵌套的组件组合而成。简而言之，嵌套路由就是在路由里面嵌套它的子路由。

嵌套路由主要通过属性：children（定义子路由组模板内容）

重定位属性：redirect（用于将路由重新定位）

1. 案例：主页-用户管理页切换

<div id="app">
    <router-link to="/index" tag="button" class="btn btn-info">前往主页</router-link>
    <router-link to="/user" tag="button" class="btn btn-info">前往用户管理页</router-link>
    <router-view></router-view>
</div>

<template id="login">
    <div class="bg-secondary w-50 p-5">
        <h3 class="mt-2 text-center">登录页面</h3>
        <input placeholder="请输入用户名" class="form-control mt-2"/>
        <input placeholder="请输入密码" class="form-control mt-2"/>
        <div class="text-center">
            <button class="btn btn-danger mt-2">登录</button>
        </div>
    </div>
</template>
<template id="register">
    <div class="bg-secondary w-50 p-5">
        <h3 class="mt-2 text-center">注册页面</h3>
        <input placeholder="请输入用户名" class="form-control mt-2"/>
        <input placeholder="请输入密码" class="form-control mt-2"/>
        <input placeholder="请确认密码" class="form-control mt-2"/>
        <div class="text-center">
            <button class="btn btn-danger mt-2">注册</button>
        </div>
    </div>
</template>
<template id="index">
    <div class="bg-secondary text-center">
        <h3 class="mt-2 text-center">主页</h3>
        <pre>
            梦里有我曾见过的月光，
            也有你如初待我的模样。
        </pre>
    </div>
</template>
<template id="user">
    <div>
        <h3 class="text-center my-2">用户管理</h3>
        <router-link to="/user/login" tag="button" class="btn btn-info">前往登录页</router-link>
        <router-link to="/user/register" tag="button" class="btn btn-info">前往注册页</router-link>
        <div class="container bg-warning">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    const temp_index = {'template': '#index'};
    const temp_user = {'template': '#user'};
    const temp_login = {'template': '#login'};
    const temp_register = {'template': '#register'};
    const routes = [
        // 默认跳转到index
        {path: '/', component: temp_index},
        {path: '/index', component: temp_index},
        {
            path: '/user',
            component: temp_user,
            children: [
                {path: 'login', component: temp_login},
                {path: 'register', component: temp_register},
                {
                    path: '/user', // 在子组件中，如果路径是父路径，默认进去的子路由是子路由中的某一个，当前是登录页面
                    redirect: '/user/login'//重定向
                },
            ]
        }
    ];
    const router = new VueRouter({
        routes: routes
    });
    var vm = new Vue({
        router: router
    }).$mount('#app');
</script>

四.命名路由

在使用路由的时候，一般会在router对象中配置path属性，在页面中使用标签的to属性去跳转目标URL。例如,这里的”/user“是在全局配置对象中配置的path值，这种显式应用的路径一旦改变，所有用的地方都需要进行相应的改变，增加了开发的工作量。

为此vue-router提供了一种隐式引用的路径，即命名路由，可以在创建Router对象的时候再routes中给某个路由设置name值。通过名字来调用该路由会更加方便。

通过**name:‘名字’**为路由绑定名字

通过**:to="{name:‘名字’}"**引入操作路由

1 案例：命名嵌套路由

 <router-link :to="{name:'route1'}" tag="button" class="btn btn-info">前往用户注册中心</router-link>
{path: '/index', name: 'route1', component: temp_index},

<div id="app">
    <!-- v-bind:to="{name:route1}" 绑定到名叫route1的路由上 -->
    <router-link :to="{name:'route1'}" tag="button" class="btn btn-info">前往主页</router-link>
    <router-link :to="{name:'route2'}" tag="button" class="btn btn-info">前往用户注册中心</router-link>
    <router-view></router-view>
</div>

<template id="login">
    <div class="bg-secondary w-50 p-5">
        <h3 class="mt-2 text-center">登录页面</h3>
        <input placeholder="请输入用户名" class="form-control mt-2"/>
        <input placeholder="请输入密码" class="form-control mt-2"/>
        <div class="text-center">
            <button class="btn btn-danger mt-2">登录</button>
        </div>
    </div>
</template>
<template id="register">
    <div class="bg-secondary w-50 p-5">
        <h3 class="mt-2 text-center">注册页面</h3>
        <input placeholder="请输入用户名" class="form-control mt-2"/>
        <input placeholder="请输入密码" class="form-control mt-2"/>
        <input placeholder="请确认密码" class="form-control mt-2"/>
        <div class="text-center">
            <button class="btn btn-danger mt-2">注册</button>
        </div>
    </div>
</template>
<template id="index">
    <div class="bg-secondary text-center">
        <h3 class="mt-2 text-center">主页</h3>
        <pre>
            梦里有我曾见过的月光，
            也有你如初待我的模样。
        </pre>
    </div>
</template>
<template id="user">
    <div>
        <h3 class="text-center my-2">用户管理</h3>
        <router-link :to="{name:'route3'}" tag="button" class="btn btn-info">前往登录页</router-link>
        <router-link :to="{name:'route4'}" tag="button" class="btn btn-info">前往注册页</router-link>
        <div class="container bg-warning">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    //1.定义路由组
    const temp_index = {'template': '#index'};
    const temp_user = {'template': '#user'};
    const temp_login = {'template': '#login'};
    const temp_register = {'template': '#register'};
    //2 定义路由数组
    const routeArr = [
        {path: '/', redirect: '/index'},
        {path: '/index', name: 'route1', component: temp_index},
        {
            path: '/user', name: 'route2', component: temp_user,
            children: [
                {path: 'login', name: 'route3', component: temp_login},
                {path: 'register', name: 'route4', component: temp_register},
                {path: '/user',name:'route2', redirect: '/user/login'},
            ]
        },
    ];
    const router = new VueRouter({
        routes: routeArr
    });
    var vm = new Vue({
        router: router
    }).$mount('#app');
</script>

2 案例：阿里巴巴介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套路由案例</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <style>
        .box {
            border: 1px red solid;
        }
    </style>
</head>
<body>
<div id="app" class="box container p-3">
    <div class="row">
        <div class="col col-2 p-3">
            <router-link :to="{name:'about'}" tag="button" class="btn btn-outline-warning">关于公司</router-link>
            <router-link :to="{name:'culture'}" tag="button" class="btn btn-outline-warning">企业文化</router-link>
        </div>
        <div class="col col-10 p-3">
            <div class="box p-1">
                <router-view></router-view>
            </div>
        </div>
    </div>
</div>
<template id="temp_about">
    <div class="bg-secondary text-center text-white">
        <h3>阿里巴巴简介</h3>
        <div>
            <router-link :to="{name:'about1'}" class="bg-info">关于公司</router-link>
            <router-link :to="{name:'about2'}" class="bg-info">公司治理</router-link>
        </div>
        <router-view></router-view>
    </div>
</template>
<template id="temp_culture">
    <div class="text-white text-center bg-secondary">
        <h3>我们的企业文化</h3>
        <p>
            阿里巴巴集团的文化关乎维护小企业的利益。我们的生态系统的所有参与者，包括消费者、商家、第三方服务供应商和其他人士，都享有成长或获益的机会。我们的业务成功和快速增长有赖于我们尊崇企业家精神和创新精神，并且始终如一地关注和满足客户的需求。
        </p>
    </div>
</template>
<template id="temp_about1">
    <div class="text-white text-center">
        <strong>相会在阿里巴巴：</strong>
        <p>
            我们助力数以亿计的用户之间、消费者与商家之间、各企业之间的日常商业和社交互动。
            工作在阿里巴巴：
        </p>
        <strong>工作在阿里巴巴：</strong>
        <p>
            我们向客户提供商业基础设施和新技术，让他们建立业务、创造价值，并与我们生态系统的参与者共享收益。
            生活在阿里巴巴：
        </p>
        <strong>生活在阿里巴巴：</strong>
        <p>
            我们致力于拓展产品和服务范畴，让阿里巴巴成为我们客户日常生活的重要部份。
        </p>
    </div>
</template>
<template id="temp_about2">
    <div class="text-white text-center">
        <strong>相会在阿里巴巴：</strong>
        <p>
            阿里巴巴集团的使命是让天下没有难做的生意。
        </p>
        <strong>工作在阿里巴巴：</strong>
        <p>
            我们旨在助力企业，帮助其变革营销、销售和经营的方式，提升其效率。我们为商家、品牌及其他企业提供技术基础设施以及营销平台，帮助其借助新技术的力量与用户和客户进行互动，并更高效地进行经营。
        </p>
        <strong>我们的愿景：</strong>
        <p>
            我们不追求大，不追求强；我们追求成为一家活102年的好公司。我们旨在构建未来的商业基础设施。我们的愿景是让客户相会、工作和生活在阿里巴巴
        </p>
    </div>
</template>

<script>
    const temp_aoubt = {template: '#temp_about'};
    const temp_aoubt1 = {template: '#temp_about1'};
    const temp_aoubt2 = {template: '#temp_about2'};
    const temp_culture = {template: '#temp_culture'};
    const routerArr = [
        {path: '/', name: 'about', redirect: '/temp_about'},
        {
            path: '/temp_about', name: 'about', component: temp_aoubt,
            children: [
                {path: 'temp_about1', name: 'about1', component: temp_aoubt1},
                {path: 'temp_about2', name: 'about2', component: temp_aoubt2},
                {path: '/temp_about', name: 'about1', redirect: '/temp_about/temp_about1'},
            ]
        },
        {path: '/temp_culture', name: 'culture', component: temp_culture}
    ];
    const router = new VueRouter({
        routes: routerArr
    });
    var vm = new Vue({
        router: router
    }).$mount('#app');
</script>
</body>
</html>

5.3 案例：个人页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套路由案例</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <style>
        .bg {
            background-color: #dddddd;:;
        }

        .box {
            border: solid 1px #3ebf8f;
            background-color: white;
        }

        .msg {
            color: #3ebf8f;
            font-size: 30px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="container bg" id="app">
    <div class="row p-3">
        <div class="col-12 box p-3">
            <router-link :to="{name:'tab'}" tag="button" class="btn btn-outline-info">用户管理</router-link>
        </div>
    </div>
    <router-view></router-view>
</div>
<template id="temp_tab">
    <div class="row pl-3 pr-3 pb-3">
        <div class="col col-3 box p-3 text-center">
            <router-link :to="{name:'item1'}" tag="button" class="btn btn-outline-warning mt-1">基础信息</router-link>
            <br/>
            <router-link :to="{name:'item2'}" tag="button" class="btn btn-outline-warning mt-1">电子邮件</router-link>
            <br/>
            <router-link :to="{name:'item3'}" tag="button" class="btn btn-outline-warning mt-1">联系方式</router-link>
        </div>
        <div class="col ml-3 box p-3 text-white">
            <router-view></router-view>
        </div>
    </div>
</template>
<template id="temp_item1">
    <div class="col text-center p-5 msg">
        用户基本信息管理
    </div>
</template>
<template id="temp_item2">
    <div class="col text-center p-5 msg">
        用户的<br/>电子邮件管理
    </div>
</template>
<template id="temp_item3">
    <div class="col text-center p-5 msg">
        用户的电子邮件管理
    </div>
</template>
<script>
    const temp_tab = {template: '#temp_tab'};
    const temp_item1 = {template: '#temp_item1'};
    const temp_item2 = {template: '#temp_item2'};
    const temp_item3 = {template: '#temp_item3'};
    const routeArr = [
        {path: '/', name: 'tab', redirect: '/temp_tab'},
        {
            path: '/temp_tab', name: 'tab', component: temp_tab,
            children: [
                {path: 'temp_item1', name: 'item1', component: temp_item1},
                {path: 'temp_item2', name: 'item2', component: temp_item2},
                {path: 'temp_item3', name: 'item3', component: temp_item3},
                {path: '/temp_tab', name: 'item1', redirect: '/temp_tab/temp_item1'},
            ]
        },
    ];
    const router = new VueRouter({
        routes: routeArr
    });
    const vm = new Vue({
        router: router
    }).$mount('#app')
</script>
</body>
</html>

五.命名视图

在开发中，有时候想要同时或同级展示多个视图，而不是嵌套展示，则可以在页面中定义多个单独命名的视图。

使用可以为视图进行命名，它主要用来负责路由跳转后组件的展示。在上定义name属性表示视图的名字，然后就可以根据不同的name值展示不同的页面。如果没有设置名字，那么默认为default。

6.1 案例：登录注册视图型展示

<!--
命名视图
每个视图对应一个模板
在同一个级别中展示不同的路由视图
<router-view name=''/>
-->
<div id="app" class="container border border-danger p-5 mt-5">
    <div class="row">
        <router-view name="header" class="col-12"></router-view>
    </div>
    <div class="row">
        <router-view name="left" class="col-3"></router-view>
        <router-view name="right" class="col-9"></router-view>
    </div>
    <div class="row">
        <router-view name="footer" class="col-12"></router-view>
    </div>
</div>
<template id="temp1">
    <div class="bg-secondary text-white text-center" style="width: 100%;height: 100px;">
        <h1>这是网页的头部</h1>
    </div>
</template>
<template id="temp2">
    <div class="bg-danger text-white text-center" style="height: 400px;">
        <!--<h1>这是左侧</h1>-->
        <router-link to="/login" tag="button" class="btn btn-info px-5 my-5">登录</router-link>
        <br/>
        <router-link to="/register" tag="button" class="btn btn-info px-5 my-5">注册</router-link>
    </div>
</template>
<template id="temp3">
    <div class="bg-info text-white text-center" style="height: 400px;">
        <h1>这是右侧</h1>
    </div>
</template>
<template id="temp4">
    <div class="bg-secondary text-white text-center" style="width: 100%;height: 100px;">
        <h1>这是网页的尾部</h1>
    </div>
</template>
<template id="login">
    <div>
        <h3 class="text-center mt-2">登录页面</h3>
        <input placeholder="请输入用户名" class="form-control mt-2" type="text"/>
        <input placeholder="请输入密码" class="form-control mt-2" type="password"/>
        <div class="text-center mt-2">
            <button class="btn btn-danger">登录</button>
        </div>
    </div>
</template>
<template id="register">
    <div>
        <h3 class="text-center mt-2">登录页面</h3>
        <input placeholder="请输入用户名" class="form-control mt-2" type="text"/>
        <input placeholder="请输入密码" class="form-control mt-2" type="password"/>
        <input placeholder="确认密码" class="form-control mt-2" type="password"/>
        <div class="text-center mt-2">
            <button class="btn btn-danger">注册</button>
        </div>
    </div>
</template>
<script>
    //定义组件
    var router_header = {'template': '#temp1'};
    var router_left = {'template': '#temp2'};
    var router_right = {'template': '#temp3'};
    var router_footer = {'template': '#temp4'};
    var router_login = {'template': '#login'};
    var router_register = {'template': '#register'};
    // 2.定义路由规则——路由组
    var routerArr = [
        {
            path: '/',//根路径
            components: {
                header: router_header,
                left: router_left,
                right: router_right,
                footer: router_footer
            }
        }, {
            
           //为登录时候展示如下组件
            path: '/login',
            components: {
                header: router_header,
                left: router_left,
                right: router_login,
                footer: router_footer
            }
        }, {
            //为注册时展示如下组件
            path: '/register',
            components: {
                header: router_header,
                left: router_left,
                right: router_register,
                footer: router_footer
            }
        }
    ];
    // 3.声明路由管理者，表名管理哪个路由组
    var routerObj = new VueRouter({
        routes: routerArr
    });
    new Vue({
        router: routerObj
    }).$mount('#app');
</script>

六.动态路由

1.什么是动态路由

上面讲到的路由，都是严格定义匹配好的，只有router-link中的to属性和JavaScript中定义的路由中path一样，才会显示对应的component。但是在实际开发时，这种方式是明显不足的。

2.query方式传参

通过query方式传递参数，使用path属性给定对应的跳转路径（类似于GET请求），在页面跳转的时候，可以在地址栏看到请求参数。

2.1 基本传参

<!--query的get方式传参-->
<div id="app" class="container border border-danger mt-5 p-5">
    <router-link to="/login?id=1001&name=admin" tag="button" class="btn px-5">登录</router-link>
    <router-view></router-view>
</div>
<template id="temp1">
    <div class="bg-secondary text-white p05 mt-3">
        <h3 class="text-center mt-2">登录确认页面</h3>
        <!--获得$route.query里面的参数-->
        <p>id:{{this.$route.query.id}}</p>
        <p>name:{{this.$route.query.name}}</p>
    </div>
</template>
<script>
    var router_login = {
        template: '#temp1',
        created: function () {
            console.log(this.$route)
        }
    };
    var routerArr = [
        {path: '/login', component: router_login}
    ];
    var router = new VueRouter({
        routes: routerArr
    });
    new Vue({
        router: router
    }).$mount('#app');
</script>

3.params传参

使用params方式传参不需要通过查询字符串传参，通常会搭配路由的history模式，将参数放在路由中或隐藏。

3.1 基础传参

<div id="app" class="container border border-danger p-5 my-5">
    <router-link to="/user/10/android" tag="button">params传参</router-link>
    <router-view></router-view>
</div>
<template id="temp1">
    <h2 class="text-center text-white bg-info">
        <p>编号:{{this.$route.params.id}}</p>
        <p>姓名:{{this.$route.params.name}}</p>
    </h2>demo8-路由传参2.html
</template>
<script>
    var router_user = {
        template: '#temp1'
    };
    var routerArr = [{
        path: '/user/:id/:name',
        component: router_user
    }];
    var router = new VueRouter({
        routes: routerArr
    });
    new Vue({
        router: router
    }).$mount('#app');
</script>

七.编程式导航

在当前的开发中，当进行页面切换时，都是通过来实现的，这种方式属于声明式导航。为了更方便地在项目中开发导航功能，Vue提供了编程式导航，也就是利用JavaScript代码来实现地址的传递，通过router实例方法来实现。

1.router.push()

1.query传参

<!--表单方式传参-->
<div id="app" class="container border border-danger p-5 mt-5">
    <router-view name="header"></router-view>
    <div>
        <router-view name="main"></router-view>
    </div>
</div>
<template id="temp1">
    <div>
        <h2 class="text-white text-center bg-info p-5">公司首页</h2>
    </div>
</template>

<template id="temp2">
    <div>
        <h3 class="text-center mt-2">登录页面</h3>
        <form>
            <!--双向绑定了组件里面返回的数据-->
            <input placeholder="输入姓名" v-model="name" class="form-control mt-2" type="text"/>
            <input placeholder="输入密码" v-model="pwd" class="form-control mt-2" type="text"/>
            <div class="text-center">
                <button class="btn btn-danger m-2 px-5" @click="login">登录</button>
            </div>
        </form>
    </div>
</template>
<template id="temp3">
    <div>
        <h3 class="mt-2 text-center">登录确认页面</h3>
        <p>id:{{this.$route.query.uname}}</p>
        <p>pwd:{{this.$route.query.upwd}}</p>
    </div>
</template>
<script>
    var router_header = {
        template: '#temp1'
    };
    var router_login = {
        template: '#temp2',
        data: function () {
            return {
                name: '',
                pwd: ''
            }
        },
        methods: {
            //点击登录按钮进行传参
            login: function () {
                //用路由的push方法过去表单元素提交的数据
                this.$router.push({
                    path: '/info',
                    query: {
                        //将组件data里面的数据复制给$router对象
                        uname: this.name,
                        upwd: this.pwd
                    }
                })
            }
        }
    };
    var router_info = {
        template: '#temp3'
    };
    var ruterArr = [
        {
            path: '/', components: {
                header: router_header,
                main: router_login
            }
        },
        {
            path: '/info', components: {
                header: router_header,
                main: router_info
            }
        }
    ];
    var router = new VueRouter({
        routes: ruterArr
    });
    new Vue({
        router: router
    }).$mount('#app');
</script>

2.params传参

<!--表单方式传参-->
<div id="app" class="container border border-danger p-5 mt-5">
    <router-view name="header"></router-view>
    <div>
        <router-view name="main"></router-view>
    </div>
</div>
<template id="temp1">
    <div>
        <h2 class="text-white text-center bg-info p-5">公司首页</h2>
    </div>
</template>

<template id="temp2">
    <div>
        <h3 class="text-center mt-2">登录页面</h3>
        <form>
            <input placeholder="输入姓名" v-model="name" class="form-control mt-2" type="text"/>
            <input placeholder="输入密码" v-model="pwd" class="form-control mt-2" type="text"/>
            <div class="text-center">
                <button class="btn btn-danger m-2 px-5" @click="login">登录</button>
            </div>
        </form>
    </div>
</template>
<template id="temp3">
    <div>
        <h3 class="mt-2 text-center">登录确认页面</h3>
        <p>id:{{this.$route.params.uname}}</p>
        <p>pwd:{{this.$route.params.upwd}}</p>
    </div>
</template>
<script>
    var router_header = {
        template: '#temp1'
    };
    var router_login = {
        template: '#temp2',
        data: function () {
            return {
                name: '',
                pwd: ''
            }
        },
        methods: {
            login: function () {
                //用路由的push方法过去表单元素提交的数据
                this.$router.push({
                    //采用name形式调用路由组件
                    name: 'info',
                    params: {
                        uname: this.name,
                        upwd: this.pwd
                    }
                })
            }
        }
    };
    var router_info = {
        template: '#temp3'
    };
    var ruterArr = [
        {
            path: '/', components: {
                header: router_header,
                main: router_login
            }
        },
        {
            path: '/info/:uname/:upwd',
            name: 'info',//给该路由取一个别名，可以通过名字找到路由
            components: {
                header: router_header,
                main: router_info
            }
        }
    ];
    var router = new VueRouter({
        routes: ruterArr
    });
    new Vue({
        router: router
    }).$mount('#app');
</script>

2.router.replace()

router.replace()方法和router.push()方法列斯，区别在于，为设置replace属性后，当单机时，就会调用router.replace()，导航后不会向history栈中添加新的记录，是替换当前history记录。

//编程式
router.replace({path:'user'})
//声明式
router-link :to="{path:'user'}" replace></router-link>

3.router.go()

router.go()方法参数是一个整数，表示在history历史记录中前进或后退多少部，类似于window.history.go()。this. $r o u t e r . g o (- 1) 相当于 h i s t o r y . b a c k (), 表示后退一步； t h i s .$ router.go(1)相当于history.forward(),表示前进一步，功能类似于浏览器上的后退和前进按钮，相应的地址栏也会发生改变。

4.案例：选项卡切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由传参</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<body>
<!--表单方式传参-->
<div id="app" class="container border border-danger p-5 mt-5">
    <router-view name="header"></router-view>
    <div>
        <router-view name="main"></router-view>
    </div>
</div>
<template id="temp1">
    <div>
        <h2 class="text-white text-center bg-info p-5">公司首页</h2>
    </div>
</template>

<template id="temp2">
    <div>
        <h3 class="text-center mt-2">登录页面</h3>
        <form>
            <input placeholder="输入姓名" v-model="name" class="form-control mt-2" type="text"/>
            <input placeholder="输入密码" v-model="pwd" class="form-control mt-2" type="text"/>
            <div class="text-center">
                <button class="btn btn-danger m-2 px-5" @click="login">登录</button>
            </div>
        </form>
    </div>
</template>
<template id="temp3">
    <div>
        <h3 class="mt-2 text-center">登录确认页面</h3>
        <p>id:{{this.$route.params.uname}}</p>
        <p>pwd:{{this.$route.params.upwd}}</p>
    </div>
</template>
<script>
    var router_header = {
        template: '#temp1'
    };
    var router_login = {
        template: '#temp2',
        data: function () {
            return {
                name: '',
                pwd: ''
            }
        },
        methods: {
            login: function () {
                //用路由的push方法过去表单元素提交的数据
                this.$router.push({
                    //采用name形式调用路由组件
                    name: 'info',
                    params: {
                        uname: this.name,
                        upwd: this.pwd
                    }
                })
            }
        }
    };
    var router_info = {
        template: '#temp3'
    };
    var ruterArr = [
        {
            path: '/', components: {
                header: router_header,
                main: router_login
            }
        },
        {
            path: '/info/:uname/:upwd',
            name: 'info',//给该路由取一个别名，可以通过名字找到路由
            components: {
                header: router_header,
                main: router_info
            }
        }
    ];
    var router = new VueRouter({
        routes: ruterArr
    });
    new Vue({
        router: router
    }).$mount('#app');
</script>
</body>
</html>

小C好好干饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue学习笔记02——Vue路由

一、初识路由1.路由的作用Vue的路由是前端路由，可以让组件之间互相切换。2.vue-router.js文件Vue的路由使用需要引入vue-router.js文件，且引入是有顺序的。vue.js需要在vue-router.js前面<script src="../js/vue.js"></script><script src="../js/vue-router.js"></script>二、vue-router在实现单页面前端路由时，提供了两种
复制链接

扫一扫