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.router.go(−1)相当于history.back(),表示后退一步；this.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学习笔记02——Vue路由相关推荐

Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
Vue学习笔记02 = 组件化
目录一.组件化基本概念什么是组件化?组件化有什么作用? 人面对复杂问题的处理方式: 组件化也是类似的思想: Vue组件化思想: 组件化思想的应用: 二.组件的基本使用: 2.1.创建组件的构造器. ...
阿瑶的vue学习笔记(1)Vue核心
1. Vue核心 1.1. Vue简介 1.1.1. 官网英文官网中文官网 1.1.2. 介绍与描述动态构建用户界面的渐进式JavaScript框架作者:尤雨溪 1.1.3. Vue的特点遵 ...
Vue学习笔记(九) Vue CLI
1.简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,它包括三个独立的部分: CLI:一个全局安装的 npm 包,提供在终端里使用的命令 CLI 服务:一个局部安装在使用了 @v ...
Vue学习笔记：Vue中封装自定义步骤条实现上下一步
Vue中封装自定义步骤条实现上下一步效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了: 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条 ...
少侠请重新来过 - Vue学习笔记(二) - Vue生命周期
Vue 生命周期和钩子每一个vue实例创建时,会经历一段初始化的过程,同时会调用其生命周期钩子,实例的钩子this指向它的Vue实例,不需要在钩子用箭头函数. <template>< ...
Vue + Spring Boot 学习笔记02：引入数据库实现用户登录功能
Vue + Spring Boot 学习笔记02:引入数据库实现用户登录功能在学习笔记01里,我们利用跨域打通了前端的Vue与后端的Spring Boot,实现了用户登录功能,但是后台的登录控制器在 ...
Vue学习笔记（四）—— 前端路由
介绍本文主要介绍路由的相关知识,当然主要是以Vue的路由为主要介绍对象. 有兴趣的朋友可以看看之前的文章: Vue学习笔记(一)-- 常用特性 Vue学习笔记(二)-- 组件开发 Vue学习笔记(三 ...
vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习文章目录 vue学习笔记-01-前端的发展历 ...

Vue学习笔记02——Vue路由