Vue学习笔记02——Vue路由

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="/foo">Go to Foorouter-link>
        <router-link to="/bar">Go to Barrouter-link>
    p>
    
    <router-view>router-view>
div>
<script>
    // 1.定义路由组件
    const Foo = {'template': '
foo
'
}; const Bar = {'template': '
bar
'
}; // 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">
    
    <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">
    
    <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 案例:登录注册视图型展示


<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;">
        
        <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 基本传参


<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>
        
        <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>

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.back(),表示后退一步;this. router.go(1)history.back(),退this.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>

你可能感兴趣的:(Vue,vue)