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>