本章节介绍vue路由器vue-router，它主要用来构建单页面应用。我们使用vue开发的前端工程，打包发布正式环境后就是一个单页面应用。也就是，只有一个index.html页面，不是我们之前旧工程中存在多个html文件了。我们知道，多个html页面文件相互访问的时候，可以使用超链接<a>标签执行其他的html页面。在我们的vue前端工程中，我们的页面文件基本上都是组件文件，它们不是标准的html文件，而是类似于html的vue文件。我们在之前的章节中，已经简单介绍了组件的使用方式。那么在只有一个index.html页面的应用中，我们就不可能按照之前的方式进行页面切换跳转了。那么路由器vue-router就是解决这个问题的。首先，vue-router并不包含在vue.js中，我们需要单独引用它。这里我们使用的vue-router版本是“3.5.2”，截图如下
然后我们还需要引入到html文件中，
<script src="vue-router/3.5.2/vue-router.js"></script>接下来，我们创建“06_vue_router.html”文件，代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue/2.6.14/vue.min.js"></script>
<script src="vue-router/3.5.2/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-view />
</div>
<template id="page1">
<div>
<p style="color: #ff0000;">page1</p>
<p><router-link to="/page2">page2</router-link></p>
<p><router-link to="/page3">page3</router-link></p>
</div>
</template>
<template id="page2">
<div>
<p><router-link to="/">page1</router-link></p>
<p style="color: #ff0000;">page2</p>
<p><router-link to="/page3">page3</router-link></p>
</div>
</template>
<template id="page3">
<div>
<p><router-link to="/">page1</router-link></p>
<p><router-link to="/page2">page2</router-link></p>
<p style="color: #ff0000;">page3</p>
</div>
</template>
<script>
// 三个页面，就是三个组件而已
var page1 = Vue.component('page1', { template:'#page1' });
var page2 = Vue.component('page2', { template:'#page2' });
var page3 = Vue.component('page3', { template:'#page3' });
// 定义路由规则
var router = new VueRouter({
routes:[
{path:'/', name:'page1', component:page1},
{path:'/page2', name:'page2', component:page2},
{path:'/page3', name:'page3', component:page3},
]
});
// 实例化Vue
new Vue({ el: '#app', router })
</script>
</body>
</html>
我们详细解释一下上面的代码。首先，我们定义了三个页面page1,page2和page3，其实就是三个Vue组件而已。在每一个页面中，我们都添加了三个页面的跳转链接<router-link>标签，这个<router-link>标签实际上就是超链接<a>标签，它的“to”属性就是待跳转页面的“地址”。为什么这个“地址”要加引号呢？是因为这个“地址”不是真实的页面文件所在的物理地址，而是我们按照一定规则自定义出来的。三个页面和组件介绍完毕之后，我们就开始重点介绍VueRouter路由器的实例化，也就是定义我们的路由规则。首先，我们要实例化路由对象，也就是new VueRouter的操作。实例化需要传递“routes”路由规则参数。这个路由规则参数，就是定义了哪些页面如何访问的“地址”，也就是代码中的“path”属性。这个“path”属性值就是我们上文中<router-link>标签中“to”属性对应的值。也就是说，我们在“path”属性中如何定义某个页面的访问“地址”，我们在页面中使用<router-link>标签访问该页面的时候，其“to”属性值就写成什么样子。这里需要注意的是，我们在定义路由规则的时候，第一个定义的往往是“/”访问地址，它代表默认地址，或者说是首页地址，其他地址就可以按照一定规则自定义了。由于我们只是演示，我们将访问地址，页面名称，组件名称都保持一致了。最后，路由对象router构建完毕之后，就是vue实例的构建，同时将路由对象router放置到vue实例中，就可以通过“this.$router”来访问路由对象了（this指的就是vue实例）。最后不要忘了在<div id=”app”>里面添加“<router-view />”标签。接下来，我们就来演示一下。
这是页面打开后的默认样子，也就是默认指向“path”属性值为“/”的默认地址，也就是我们的“page1”页面。我们在右侧的开发者窗口中，也可以看到，<router-link>标签被vue翻译成了<a>标签。而超链接<a>的href属性值都是以“#”号开始，然后加上“path”属性值。我们之前大概说明过“#”号的意思就是当前页面。因为，我们本章节开始的位置说过，vue工程都是单页面应用，不存在超链接<a>跳转其他页面的情况。这里就涉及到vue-router跳转页面的原理了。vue-router默认为hash模式，#就是hash符号，在hash符号后的值称为hash值。路由的hash模式是利用了window可以监听onhashchange事件来实现的，当一个窗口的hash(浏览器地址中#号后面的部分)改变时候，就会触发onhashchange事件。还有一种history模式实现方式，这种模式利用了history.pushState()来完成URL的跳转，并且不会出现#号。使用history模式时，需要在路由规则配置中增加 mode:'history' 项目。这些内容，我们了解就可以了。接下来，我们点击“page2”链接查看效果。
在页面跳转的时候，我们也注意到浏览器地址的变化。
然后，我们再点击“page3”链接查看效果。
最终我们发现，通过vue-router我们实现了多个页面的跳转切换。这对于我们在前端工程中，开发多个页面帮助很大。接下来，我们介绍如何使用js进行页面跳转，我们创建“06_vue_router2.html”文件，代码如下所示：
<div id="app">
<router-view />
</div>
<template id="page1">
<div>
<p style="color: #ff0000;">page1</p>
<p @click="goto('page2')">page2</p>
<p @click="goto('page3')">page3</p>
</div>
</template>
<template id="page2">
<div>
<p @click="goto('')">page1</p>
<p style="color: #ff0000;">page2</p>
<p @click="goto('page3')">page3</p>
</div>
</template>
<template id="page3">
<div>
<p @click="goto('')">page1</p>
<p @click="goto('page2')">page2</p>
<p style="color: #ff0000;">page3</p>
</div>
</template>
<script>
// 三个页面，就是三个组件而已
var page1 = Vue.component('page1', {
template:'#page1',
methods: {
goto: function(param){
this.$router.push('/'+param);
}
}
});
var page2 = Vue.component('page2', {
template:'#page2',
methods: {
goto: function(param){
this.$router.push('/'+param);
}
}
});
var page3 = Vue.component('page3', {
template:'#page3',
methods: {
goto: function(param){
this.$router.push('/'+param);
}
}
});
// 定义路由规则
var router = new VueRouter({
routes:[
{path:'/', name:'page1', component:page1},
{path:'/page2', name:'page2', component:page2},
{path:'/page3', name:'page3', component:page3},
]
});
// 实例化Vue
new Vue({ el: '#app', router })
</script>
修改的地方有两点，第一，就是不再使用<router-link>标签进行跳转，而是使用js方法。因为我们为<p>标签声明了点击事件，对应执行的方法是“goto(xxx)”，方法参数就是“path”属性值。这里需要注意的是，由于我们的“page1”页面定义为默认“/”的“path”值，因此对应的“goto(xxx)”方法参数为空字符串就行了。第二，就是为每个页面都添加goto方法，然后在方法内容使用“this.$router.push('/'+param);”进行页面跳转。
接下来，我们来介绍路由跳转页面时候的参数传递。
我们创建“06_vue_router3.html”文件
<div id="app">
<router-view />
</div>
<template id="page1">
<div>
<p style="color: #ff0000;">page1, {{$route.params.myname}}</p>
<p><router-link :to="{name:'page2', params:{myname:'tom2'}}">page2</router-link></p>
<p><router-link :to="{name:'page3', params:{myname:'tom3'}}">page3</router-link></p>
</div>
</template>
<template id="page2">
<div>
<p><router-link :to="{name:'page1', params:{myname:'tom1'}}">page1</router-link></p>
<p style="color: #ff0000;">page2, {{$route.params.myname}}</p>
<p><router-link :to="{name:'page3', params:{myname:'tom3'}}">page3</router-link></p>
</div>
</template>
<template id="page3">
<div>
<p><router-link :to="{name:'page1', params:{myname:'tom1'}}">page1</router-link></p>
<p><router-link :to="{name:'page2', params:{myname:'tom2'}}">page2</router-link></p>
<p style="color: #ff0000;">page3, {{$route.params.myname}}</p>
</div>
</template>
<script>
// 三个页面，就是三个组件而已
var page1 = Vue.component('page1', { template:'#page1' });
var page2 = Vue.component('page2', { template:'#page2' });
var page3 = Vue.component('page3', { template:'#page3' });
// 定义路由规则
var router = new VueRouter({
routes:[
{path:'/', name:'page1', component:page1},
{path:'/page2', name:'page2', component:page2},
{path:'/page3', name:'page3', component:page3},
]
});
// 实例化Vue
new Vue({ el: '#app', router })
</script>
我们首先介绍<router-link>标签下的参数传递。首先，使用<router-link>标签的时候，我们就需要携带参数。之前进行跳转的时候是“<router-link to="/page3">”进行配置，现在我们是“<router-link :to="{name:'page3', params:{myname:'tom3'}}">”。区别在于，前者的“to”属性是一个静态字符串“/page3”，也就是我们的“path”属性值；而后者的“:to”是一个绑定属性，它是一个json对象，里面的name是路由配置页面的名称。我们在路由规则定义的时候，每一个页面都定义了一个“path”属性，还有一个“name”属性。这个后面的“name”属性就是我们“:to”属性中的name属性，两者保持一致。再次强调一下，使用:to传递参数，得使用路由的name属性值，而不是path属性值。然后就是“params”参数属性，它也是一个json对象，里面我们自定义了“myname:'tom3'”的参数对。也就是说，我们可以通过“myname”获取到字符串文本“tom3”。当我们跳转的指定页面（例如page3）的时候，我们就可以通过“{{$route.params.myname}}”获取到参数值（例如tom3）。这里强调一下，获取参数的时候，使用 $route.params.xxx，而不是 $router.params.xxx（没有字母r）。
首页是默认显示“page1”页面，不是我们携带参数的跳转，所有暂时没有参数输出。
当我手动点击“page1”页面的时候，此时是携带参数的，
接下来，我们再介绍一下js下的参数传递，我们同样创建“06_vue_router4.html”文件
<div id="app">
<router-view />
</div>
<template id="page1">
<div>
<p style="color: #ff0000;">page1, {{$route.params.myname}}</p>
<p @click="goto('page2','tom2')">page2</p>
<p @click="goto('page3','tom3')">page3</p>
</div>
</template>
<template id="page2">
<div>
<p @click="goto('page1','tom1')">page1</p>
<p style="color: #ff0000;">page2, {{$route.params.myname}}</p>
<p @click="goto('page3','tom3')">page3</p>
</div>
</template>
<template id="page3">
<div>
<p @click="goto('page1','tom1')">page1</p>
<p @click="goto('page2','tom2')">page2</p>
<p style="color: #ff0000;">page3, {{$route.params.myname}}</p>
</div>
</template>
<script>
// 三个页面，就是三个组件而已
var page1 = Vue.component('page1', {
template:'#page1',
methods: {
goto: function(name, param){
//this.$router.push('/'+param);
this.$router.push({name:name, params:{myname:param}});
}
}
});
var page2 = Vue.component('page2', {
template:'#page2',
methods: {
goto: function(name, param){
//this.$router.push('/'+param);
this.$router.push({name:name, params:{myname:param}});
}
}
});
var page3 = Vue.component('page3', {
template:'#page3',
methods: {
goto: function(name, param){
//this.$router.push('/'+param);
this.$router.push({name:name, params:{myname:param}});
}
}
});
// 定义路由规则
var router = new VueRouter({
routes:[
{path:'/', name:'page1', component:page1},
{path:'/page2', name:'page2', component:page2},
{path:'/page3', name:'page3', component:page3},
]
});
// 实例化Vue
new Vue({ el: '#app', router })
</script>
主要修改有两点。第一，跳转方法goto的修改，该方法参数改成两个。然后使用代码“this.$router.push({name:name, params:{myname:param}});”进行跳转。之前的push方法直接写成“path”属性值形式即可，现在的需要构建一个json对象。该json对象的name就是路由name，而params就是传递参数，也是一个json对象。其实与我们上文中<router-link>标签的修改是一样的。第二，就是goto方法的使用“@click="goto('page2','tom2')"”，对应两个方法参数的传递，非常简单，我们就不详细说明以及截图显示效果了。
最后，我们介绍一些父子路由的配置。我们创建“06_vue_router5.html”文件，
<div id="app">
<router-view />
</div>
<template id="index">
<div>
<p style="color: #ff0000;">index</p>
<p><router-link to="/parent">parent</router-link></p>
</div>
</template>
<template id="parent">
<div>
<p style="color: #ff0000;">parent</p>
<p><router-view /></p>
</div>
</template>
<template id="childone">
<div>
<p style="color: #ff0000;">childone</p>
<p><router-link to="/childtwo">childtwo</router-link></p>
</div>
</template>
<template id="childtwo">
<div>
<p><router-link to="/childone">childone</router-link></p>
<p style="color: #ff0000;">childtwo</p>
</div>
</template>
<script>
var index = Vue.component('index', { template:'#index' });
var parent = Vue.component('parent', { template:'#parent' });
var childone = Vue.component('childone', { template:'#childone' });
var childtwo = Vue.component('childtwo', { template:'#childtwo' });
var router = new VueRouter({
routes:[
{ path:'/', name:'index', component: index },
{ path:'/parent', name:'parent', component: parent, redirect:'childone', children:[
{ path:'/childone', name:'childone', component:childone },
{ path:'/childtwo', name:'childtwo', component:childtwo }
]}
]
});
new Vue({ el: '#app', router })
</script>
我们依然定义了四个index, parent, childone和childtwo组件页面。其中index是默认页面，parent是父组件页面，剩下的childone和childtwo是parent的子组件页面。我们注意到，除了<div id=”app”>中存在一个“<router-view />”标签之外，在parent中也有一个“<router-view />”标签。也就是后说，index和parent页面是在<div id=”app”>中的“<router-view />”标签渲染的，而childone和childtwo则是在parent中的“<router-view />”标签渲染的。接下来，就是路由配置规则的内容，首先我们配置了默认路由“/”就是index页面，然后就是“/parent”路由，对应了parent页面。最重要的就是“children”子页面的配置，里面包含了childone和childtwo两个页面，页面配置项目也非常简单。注意到“redirect”配置项为“childone”，意思是说，当我们进入到parent页面的时候，其里面的“<router-view />”标签默认渲染childone子页面。理解了父子组件之后，我们查看页面效果吧。
这是默认的index页面，接下来，我们点击parent
这就是parent页面，默认渲染childone页面，然后我们点击childone页面中的childtwo
我们进入到了childtwo页面，但是前提是，我们仍然在parent页面，只是parent里面的<router-view />渲染的是childtwo页面而已。
本章节先介绍到这里。
本课程的内容可以通过CSDN免费下载：https://download.csdn.net/download/richieandndsc/89025243
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
